読者です 読者をやめる 読者になる 読者になる

ES6版React.jsでBMI calc を作ってみる

ES6 JavaScript React.js

BMIカテゴライズ 参考:
Calculate Your BMI - Metric BMI Calculator


See the Pen BMI calc by uraway (@uraway) on CodePen.

bmiCalc関数によって、BMI数値を計算し、stateを更新して、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'});}
  
  }

一つの関数に一つのイベントトリガーが対応しているようなので、別の関数にするのではなく、上記のように一つにまとめてあげると良い。
JavaScriptの関数(Math.roundなど)はReactのAPI内では使えないことに注意。
と思ったけど二回クリックしてやっとただしくカテゴライズされる??あれ?

で、これ最終的に妥協してこうなった。