Question

在这段代码的情况下，我必须两次点击计算按钮才能找到BMI和BMI判断的答案。如何编码才能点击一次找到两个答案？

bmiCalc (){
    this.setState({bmi:this.state.weight/(this.state.height*this.state.height)*10000});


    if(this.state.bmi<18.5){this.setState({judge: 'Underweight'});}
    else if(this.state.bmi<24.9){this.setState({judge:'Normal weight'});}
    else if(this.state.bmi<30){this.setState({judge:'Overweight'});}
    else{this.setState({judge:'Obesity'});}
}


render(){
    return (
        <ul><button onClick={this.bmiCalc.bind(this)}>calculate</button></ul>
        <ul>BMI: {Math.round(this.state.bmi*10)/10}</ul>
        <ul>BMI judge :{this.state.judge} </ul>
    );
}

Answer 1

您可以使用以下内容：

function desiredActions (){
  action1()
  action2()
}

<button onclick={desiredActions}></button>

基本上只需在函数中包装要调用的函数，并将其分配给onclick处理程序。

注意：这不是React或ES6特有的，只是基本的JavaScript。

Answer 2

您可以通过在函数结束时调用set state来执行此操作：

bmiCalc() {
    const bmi = this.state.weight/(this.state.height*this.state.height)*10000;
    let judge = 'Obesity';
    if(this.state.bmi<18.5){this.setState({judge: 'Underweight'});}
    else if(this.state.bmi<24.9){this.setState({judge:'Normal weight'});}
    else if(this.state.bmi<30){this.setState({judge:'Overweight'});}

    this.setState({bmi: bmi, judge: judge});
}

如何在React＆amp;中的Click事件上实现两个或更多功能ES6

2 个答案: