React 和 ES6 如何在 Click 事件上实现两个或多个函数

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

您可以通过在函数结束时调用一次设置状态来执行此操作：

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 和 ES6 如何在 Click 事件上实现两个或多个函数

How to implement two or more functions on Click event in React & ES6

javascript

dom-events

reactjs