0

Estou desenvolvendo um projeto, e ao digitar um valor em um campo necessito que o outro campo seja alterado com base nos valores que defini em uma função, aqui está o código:

 constructor(props) {
    super(props);
    this.state = {
        rendimentoMes: '',
        risco: '',

    }


}

changeRendimentoMesHandler= (event) => {
    this.setState({rendimentoMes: event.target.value});
}

changeRiscoHandler= (event) => {
    this.setState({risco: event.target.value});
}

Na função abaixo eu faço a verificação do valor que será inserido no campo Rendimento Mensal, que deveria impactar no campo risco:

defineRisco(){
    if (this.state.rendimentoMes != null){
        if (this.state.rendimentoMes > 6000){
            this.state.risco = "A";
        } else if (this.state.rendimentoMes > 1000 && this.state.rendimentoMes <= 8000){
            this.state.risco = "B";
        } else {
            this.state.risco = "C";
        }
    }
}

E aqui está o meu render, onde deveria ser atualizado dinamicante de acordo com o valor do campo Rendimento mensal. Estou tentando realizar dessa forma, alguém me ajuda a saber onde estou errando?

render() {
        return (
            <div>

                                <div className="form-group">
                                    <label> Rendimento Mensal: </label>
                                    <input type ="Number" placeholder="Rendimento Mensal:" name="rendimentoMes" className="form-control"
                                    value={this.state.rendimentoMes} onChange={this.changeRendimentoMesHandler} blur={this.defineRisco} />
                                </div>

                                <div className="form-group">
                                    <label> Risco: </label>
                                    <input disabled type ="Number" placeholder="" name="risco" className="form-control"
                                           value={this.state.risco} onChange={this.defineRisco()} />
                                </div>
                            </form>
                        </div>

                    </div>
                </div>


            </div>
        )
    }
1
  • viu a respostas?
    – novic
    Commented 17/12/2020 às 0:02

1 Resposta 1

0

O seu código tem muitos problemas e erros que eu acabei identificando como por exemplo onChange tem um delegate diferente defineRisco() e causava um erro, a outra situação é o tipo do <input> que é importante sempre saber que quando for colocar letras nunca pode ser diferente de text o seu type e quando atualiza o estado rendimentoMes no método this.setState após o primeiro paramento tem o próximo que significa que quando alterar o estado da variável executa alguma função que ai sim poderia ser utilizado defineRisco e no defineRisco fiz também ajustes porque o valor é um texto gravado no estado e precisa alterar para um inteiro, como está no exemplo:

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
        rendimentoMes: '',
        risco: '',
    }
    this.changeRendimentoMesHandler =
      this.changeRendimentoMesHandler.bind(this);
    this.changeRiscoHandler =
      this.changeRiscoHandler.bind(this);
    this.defineRisco = 
      this.defineRisco.bind(this);
  }
  changeRendimentoMesHandler = (event) => {
    this.setState({rendimentoMes: event.target.value},
    () => { 
      this.defineRisco();       
    }
    );
  }

  changeRiscoHandler = (event) => {
    this.setState({risco: event.target.value});
  }
  defineRisco = () => {  
    if (this.state.rendimentoMes){
        const value = parseInt(this.state.rendimentoMes);
        if (!value) return;
        if (value > 6000){
            this.setState({risco:'A'});
        } 
        else if (value > 1000 && value <= 8000)
        {
            this.setState({risco:'B'});
        } else {
            this.setState({risco:'C'});
        }
    }
  }
  
  render() {
    return (
      <div>
        {JSON.stringify(this.state)}
          <div className="form-group">
              <label> Rendimento Mensal: </label>
              <input type ="Number" 
                  placeholder="Rendimento Mensal:" 
                  name="rendimentoMes" 
                  className="form-control"
                  value={this.state.rendimentoMes} 
                  onChange={this.changeRendimentoMesHandler} 
              />
          </div>
        <div className="form-group">
            <label> Risco: </label>
            <input disabled 
                type ="text" 
                placeholder="" 
                name="risco" 
                className="form-control"
                value={this.state.risco} 
                onChange={this.changeRiscoHandler} 
            />
        </div>  
    </div>
    )
  }
}

ReactDOM.render( <App/> , document.getElementById('root'));
<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script><script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
<div id="root">Carregando ...</div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .