【React 入門】 計算アプリの作成

参考にしたサイトのコードをリファクタリングしたので記録に残します。
https://tech.e3factory.com/programming/2586

//nameをsetStateと合わせる
<ValueInput name="value1" value={this.state.value1} valueChange={this.valueChange} />+
<ValueInput name="value2" value={this.state.value2} valueChange={this.valueChange} />=

valueChangeの共通化

①stateとnameのkeyを合わすことによって、「[name]」で共通化できる
②①で更新した値を元に合計値（answer）を再計算している
※単にsetStateを２回書くと更新前の値で合計が計算されてしまう為注意

 // 値が変更された時、計算を行う
  valueChange(e) {
    var name  = e.target.name;
    var value = e.target.value;
    // ①setStateで変更があった値を更新
    this.setState({
      [name]: value, //入力したValueInputの値を変更する（[_name]value1、value2）
    }, () => {
      // このコールバック関数内で新しい状態にアクセスできる
      // ②setStateで合計を更新
      this.setState({
        answer: parseInt(this.state.value1) + parseInt(this.state.value2)
      });
    });
  }

全体コード

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

class ValueInput extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
  }

  // 値が変更された時の処理
  handleChange(e) {// element
    this.props.valueChange(e);
  }

  render() {
    return (
      <div>
        <input type="text" name={this.props.name} value={this.props.value} onChange={this.handleChange} />
      </div>
    );
  }
}

class ValueAnswer extends React.Component {
  render() {
    return (
      <span>{this.props.value}</span>
    );
  }
}

//計算回りの処理
class Calculator extends React.Component {
  constructor(props) {
    super(props);
    this.valueChange = this.valueChange.bind(this);
    this.state = {
      value1: 0, // ValueInputのnameと同じkeyとしている
      value2: 0, // ValueInputのnameと同じkeyとしている
      answer: 0,
    };
  }

  // 値が変更された時、計算を行う
  valueChange(e) {
    var name = e.target.name;
    var value = e.target.value;

    this.setState({
      [name]: value, //入力したValueInputの値を変更する（[_name]value1、value2）
    }, () => {
      // このコールバック関数内で新しい状態にアクセスできる
      this.setState({
        answer: parseInt(this.state.value1) + parseInt(this.state.value2)
      });
    });
  }

  //計算のメソッド
  render() {
    return (
      <div>
        <ValueInput name="value1" value={this.state.value1} valueChange={this.valueChange} />+
        <ValueInput name="value2" value={this.state.value2} valueChange={this.valueChange} />=
        <ValueAnswer value={this.state.answer} />
      </div>
    );
  };
}

ReactDOM.render(<Calculator />, document.getElementById('root'));