React onClick イベントハンドリング 入門

今回は、ボタンを押下するとカウンターの値がカウントアップするコードを書いて、Reactでのイベントハンドリングについて学んでいきたいと思います。

実際に手を動かしてみたいという方は、以下を参考にプロジェクトを作成ください。

スポンサーリンク

onClickイベントでカウンター作成

App.jsを修正して、buttonを押すとカウントアップするComponentを作成します。

class CountButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    this.setState(state => ({
      count: state.count + 1
    }));
  }
  render() {
    return (
      <div>
        <h1>{this.state.count}</h1>
        <button onClick={this.handleClick}>
          カウントアップボタン
        </button>
      </div>
    );
  }
}
function App() {
  return (
    <div className="App">
      <header className="App-header">
        <CountButton/>
      </header>
    </div>
  );
}

上から順に何しているか確認してみましょう。

constructorでは、stateの初期化とhandleClick関数をbindしています。

constructor(props) {
  ...(省略)
  this.handleClick = this.handleClick.bind(this);
}

bindに関しては、JavaScriptの関数になりますので、詳しく知りたい方は以下を参照ください。

bind() メソッドは新しい関数を生成し、その関数が呼び出された時の一連の引数の前に、提供された値が設定された this キーワードが追加されて呼び出されます。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

clickされた場合、this.setStateで+1のカウントアップをしています。

handleClick() {
  this.setState(state => ({
    count: state.count + 1
  }));
}

最後にカウント値とカウントアップ用のボタンを設定して完了です。

render() {
  return (
    <div>
      <h1>{this.state.count}</h1>
      <button onClick={this.handleClick}>
        カウントアップボタン
      </button>
    </div>
  );
}

ビルドしてみるとカウント値とカウントアップボタンが表示されます。

$ yarn start

onClick時に引数を渡したい時

次にクリックした時に任意の数値でカウントアップする処理を作成してみましょう。

renderの方でbindする方法

5ずつアップするようなものを作ってみます。

<button onClick={this.handleClick.bind(this, 5)}>
  カウントアップボタン
</button>

handleClickには、引数(カウントアップ数値)を追加して、num分を加算するようにします。

handleClick(num) {
  this.setState(state => ({
  count: state.count + num
  }));
}

renderの際にbindしてますので、constructorでは外します。

5ずつカウントアップするカウンターができました。

その他にも、以下の方法でも実装可能です。

es6のアローファンクションでeventを渡す方法

<button onClick={(e) => this.handleClick(5, e)}>
  カウントアップボタン
</button>

まとめ

ボタンを押すとカウントアップするというシンプルな実装で、イベントのハンドリングを学びました。

Reactに慣れるまでは、簡単なコードを書いて、ここは何をしているんだ?と一つ一つ追って理解を深めれたらと思います。