0
I have two components. The first is the parent and the second is rendered in the parent as tr tags, as lines in a table, they need validation. Because the tds tags contain inputs that need to be validated before the parent records their information (this part has not yet been implemented). What is the best way to do this using React? How to validate multiple child components? Follow the code of the parent component: I will omit some parts of the code in general for easy viewing
import React from "react";
import ComboAjax from "../Componentes/ComboAjax/comboAjax";
import Row from "../Componentes/Table/Row";
import RowVazia from "../Componentes/Table/RowVazia";
import { webServiceUrl } from "../constants/web-service";
import { authHeader } from "../helpers/headerAutenticacao";
class Timesheet extends React.Component {
constructor() {
super();
this.state = {
rows: [],
rowsNovas: ['row']
}
this.leituraSolicitacao = this.leituraSolicitacao.bind(this);
this.inserRowNova = this.inserRowNova.bind(this);
}
leituraSolicitacao() {
fetch(webServiceUrl + '/solicitacoes/' + localStorage.getItem("id") + "/201804", authHeader("POST"))
.then(response => {
if (response.ok) {
return response.json();
}
}).then(resposta => {
this.setState({
rows: resposta
})
})
.catch(error => {
console.error("Erro na leitura de solicitacoes.")
})
}
inserRowNova() {
this.setState((prevState, index) => ({
rowsNovas: [...prevState + 'row' + index]
}));
}
componentDidMount() {
this.leituraSolicitacao();
}
render() {
return(
<tbody id="tbody_timesheet">
{
this.state.rowsNovas.map((index) => {
return(
<RowVazia key={index}/>
)
})
}
</tbody>
)}
}
export default Timesheet
Follow the code of the component that is rendered in the parent component map:
import React from "react";
import InputMask from 'react-input-mask';
import ComboAjax from "../ComboAjax/comboAjax";
import { validaData } from "../../helpers/validaData";
class RowVazia extends React.Component {
constructor() {
super();
this.state = {
valorBotaoControle: 'SOLJAVA',
idInputData: Math.random()
}
this.trocaControle = this.trocaControle.bind(this);
this.validaData = this.validaData.bind(this);
}
trocaControle() {
switch (this.state.valorBotaoControle) {
case "SOLJAVA":
this.setState({
valorBotaoControle: 'SOLMESTRA'
})
break;
case "SOLMESTRA":
this.setState({
valorBotaoControle: 'NÃO POSSUI'
})
break;
default:
this.setState({
valorBotaoControle: 'SOLJAVA'
})
break;
}
}
validaData() {
validaData(this.state.idInputData)
}
render() {
return(
<tr>
<td>
<InputMask style={{fontSize: '13px'}} onBlur={() => this.validaData(this.state.idInputData)} className="form-control" id={this.state.idInputData} mask="99/99/9999">
</InputMask>
</td>
<td>
<button style={{fontSize: '13px'}} onClick={() => this.trocaControle()} className="btn btn-info btn-md btn-block"
value={this.state.valorBotaoControle}>{this.state.valorBotaoControle}</button>
</td>
<td>
<InputMask mask="9999/99-99999" className="form-control">
</InputMask>
</td>
<td>
<ComboAjax url="/projetos" valorId="id" nomeObjeto="descricao" classe="form-control" />
</td>
<td>
<InputMask maxLength="60" className="form-control" >
</InputMask>
</td>
<td>
<InputMask maskChar="99:99" className="form-control">
</InputMask>
</td>
<td>
<button onClick={() => this.validaData} className="btn btn-danger">
<span className="icon icon-bin2"></span>
</button>
</td>
</tr>
)
}
}
export default RowVazia;
What kind of validation ? I couldn’t understand.
– NoobSaibot
@Noobsaibot, it doesn’t matter what exactly. I would like to know the best way to implode this anyway, validate if all fields of a row in a table are valid for example
– Thiago Souza