React.jsでFormに入力された数字の足し算

Question

React.jsで, ユーザが入力した数字(var1,var2)を加算して結果値(result)を表示するプログラムを作成したいのですが, 下記コードを実装すると, ページ上ではresult: NaNと表示され, 入力内容が反映されません.
原因を教えていただきたいです. Reactのversionは16.4.1です.

import React, { Component } from 'react';

class InputForm extends Component {
    constructor(props) {
      super(props);
      this.state = {var1: 0, var2: 0, result: 0};
      this.handleChange = this.handleChange.bind(this);
    }
  
    handleChange(event) {
      this.setState({
          var1: event.target.var1,
          var2: event.target.var2,
          result: event.target.var1 + event.target.var2
      });
    }
  
    render() {
      return (
        <div>
          <div>
            var1:<input type="text" value={this.state.var1} onChange={this.handleChange} />
          </div>
          <div>
            var2:<input type="text" value={this.state.var2} onChange={this.handleChange} />
          </div>
          <div>
            result: {this.state.result}
          </div>
        </div>
      );
    }
}

export default InputForm;

Answer 1

こんにちは。

修正案の一例として、以下のようにするとよいかもしれません。

class InputForm extends Component {
    constructor(props) {
      super(props);
      this.state = {var1: 0, var2: 0};
      this.handleChange = this.handleChange.bind(this);
    }

    handleChange(name) {
      return (event) => {
      	this.setState({
          [name]: Number(event.target.value) || 0,
      	});      
      };
    }

    render() {
      return (
        <div>
          <div>
            var1:<input type="text" value={this.state.var1 || ''} onChange={this.handleChange('var1')} />
          </div>
          <div>
            var2:<input type="text" value={this.state.var2 || ''} onChange={this.handleChange('var2')} />
          </div>
          <div>
            result: {this.state.var1 + this.state.var2}
          </div>
        </div>
      );
    }
}

修正点は以下です。

• this.stateのプロパティとして result を持たなくても、render()で加算結果を表示できるので、resultプロパティを削除
• handleChange()を修正して、変数名の 'var1' または 'var2' を受け取り、該当する this.stateのプロパティを更新するハンドラを返すように修正
• event.target.value が数値に変換できないとき、0 が入るようにした。
• this.state の持っているvar1 または var2 の値が 0 のとき、入力欄を空欄にする。

以下に上記のサンプルを作成しました。

https://jsfiddle.net/jun68ykt/xvzne5o2/2/

お望みの仕様とは少し違うかもしれませんが、参考になれば幸いです。

---

追記1

上記のコードを、もう少し親切にしたものが以下です。

https://jsfiddle.net/jun68ykt/a7enwo5t/2/

• var1 か var2 に数字でないものが入れられた場合、計算できません。 と表示します。
• this.state の var1 または var2 が 0 の場合も表示します。

追記2

handleChange の修正方法がもう一つあります。

<input > に name 属性を追加して、これで var1 か var2 かを判別できるようにすると、 以下のようにも書けます。

    handleChange(event) {
      this.setState({
        [event.target.name]: event.target.value,
     });      
    }

var1:<input name="var1" type="text" value={this.state.var1} onChange={this.handleChange} />

var2:<input name="var2" type="text" value={this.state.var2} onChange={this.handleChange} />

サンプル： https://jsfiddle.net/jun68ykt/t19bk2ns/1/

Answer 2

eventから取り出す値は、event.target.valueになります。
上記は、setStateでそれぞれにundefinedがセットされてしまうと思います。

var1とvar2のハンドラ呼び出しを分けて、それぞれの値を適切にセットすれば、解決するように思います。