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