stateで計算できるようにするためには

この記事の内容を一言で

setStateでNumberを設けて挿入される値を数字として定義する

問題点

Reactを使って家計簿を作っている時に以下の問題が発生した。

inputから数字を挿入しても0が残る

実際の動画:
https://www.useloom.com/share/43bd30dc0f0741f7b09c63a3728d2ba9

その時のコードはこんな感じ。

Cache.js

class Account extends Component {
  state = { sum: 0 };
  input = event => {
    this.setState({ input: event.target.value });
    console.log(this.state.input);
  };
  Plus = () => {
    this.setState({ sum: this.state.sum + this.state.input });
  };
  Minus = () => {
    this.setState({ sum: this.state.sum - this.state.input });
  };
  render() {
    return (
      <Fragment>
        <h2>現金</h2>
        <h3>
          現在:&nbsp;
          {this.state.sum}
        </h3>
        <input onChange={this.input} />
        <br />
        <button onClick={this.Plus}>収入</button>
        <button onClick={this.Minus}>支出</button>
      </Fragment>
    );
  }
}

原因

Cache.js

input = event => {
    this.setState({ input: event.target.value });
    //この定義でinputから追加されるのは文字
　　console.log(this.state.input);
}

そのため、inputから数字を入力しても、初期値の0の後ろに文字列として記録される。
計算できるようにするためには、inputのstateで挿入した値を数字として追加できるようにする必要がある。
では、どのようにすればそれが実現できるのか。

解決策

Cache.js

input = event => {
    this.setState({ input: Number(event.target.value) });
　　console.log(this.state.input);
}

event.target.valueの前に、inputによって挿入されるvalueを数字として定義することで解消される。
今回は後から見た時、他の人が見た時でも、わかりやすくなるようにNumberを用いたが、+やparseIntを用いることも可能だ。

解決策導入後の動画:
https://www.useloom.com/share/12a9e650a9de485fbcbc657cf4fa0c7d

解決策に至るまで

今回はstackoverflowで質問を行った。

質問: Remain 0

この記事は、そこに寄せられた回答を読み、日本語にしてまとめたものである。

Github

Issue: Remains 0
PullRequest: feat: Settled for remain 0

もっと良い方法や他のコードに対する改善案があれば教えていただきたいです。