2
respostas

Alterar cor do INPUT

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 ?

2 respostas

E ai denyysdns, blz?

Você define um único style de erro, e aplica esse style a todos os campos desejados.

Não precisa criar variados styles de erros que basicamente fazem a mesma coisa, no seu caso contendo a mesma sintaxe.

Opa Jose, obrigado pela resposta, poderia me dar um exemplo de como fazer isso ?