Skip to main content
1 de 2

Alterar campo dinamicamente no ReactJs

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, por exemplo:

 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>
        )
    }