Bom dia, Depois de fazer o curso de UX aqui da alura, pensei em colorir em vermelho os inputs que não tiver os dados validos.
Estou usando "react": "^16.4.1"
Esse código funciona:
this.state = {
backgroundcolorQuatro: '',
backgroundcolorSeis:'',
backgroundcolorDez:'',
quatro:'',
seis:'',
dez:''
}
validar = () => {
if (this.state.quatro !== '4') {
this.setState({backgroundcolorQuatro: 'red'})
alert("Correto seria 4");
return;
}
if (this.state.seis !== '6') {
this.setState({backgroundcolorSeis: 'red'})
alert("Correto seria 6");
return;
}
if (this.state.dez !== '10') {
this.setState({backgroundcolorDez: 'red'})
alert("Correto seria 10");
return;
}
alert("Success !!!");
}
clean = () =>{
this.setState({backgroundcolorQuatro:'',backgroundcolorSeis:'',backgroundcolorDez:''})
}
render() {
var inputQuatro = {
backgroundColor: this.state.backgroundcolorQuatro
}
var inputSeis = {
backgroundColor: this.state.backgroundcolorSeis
}
var inputDez = {
backgroundColor: this.state.backgroundcolorDez
}
return (
<div className="App">
<div className="col-lg-8 ml-5">
<div className="row mt-5">
<label>2 + 2 =</label>
<input onClick={this.clean} style={inputQuatro} onChange={(e) => { this.setState({ quatro: e.target.value }) }}></input>
</div>
<div className="row mt-5">
<label>3 + 3 =</label>
<input onClick={this.clean} style={inputSeis} onChange={(e) => { this.setState({ seis: e.target.value }) }}></input>
</div>
<div className="row mt-5">
<label>5 + 5 =</label>
<input onClick={this.clean} style={inputDez} onChange={(e) => { this.setState({ dez: e.target.value }) }}></input>
</div>
</div>
<button onClick={this.validar}>Validar</button>
</div>
);
}
}
export default App;
Para uma tela com poucos campos funcionaria, mas se eu tivesse uma tela com 50 campos acredito que ficaria inviável fazer dessa maneira, pois cada INPUT teria um inputStyle e uma variável no State.
Sendo assim uma tela com 50 campos ficaria com 50 variáveis no state e 50 Style, e isso me parece claramente errado.
Alguem tem alguma ideia ?