モケラ

Tech Sheets

mokelab

Reactでイベントを扱う

最終更新日:2018-07-15

ここではReactでイベントを設定する方法を紹介します。

メソッドを作る

イベント発生時に呼ばれるメソッドを作ります。引数には `React.MouseEvent` のようにReactで始まる型のイベントを受け取るようにします。

private itemClicked(e: React.MouseEvent<HTMLButtonElement>) {
    alert(this);
}

thisをバインドする

メソッド内で `this` を使用するために、コンストラクタで `this` をバインドしておきます。

class App extends React.Component {
  constructor(props: any) {
    super(props);

    this.itemClicked = this.itemClicked.bind(this);
  }
  // 中略
}

イベントを設定する

イベントは通常のHTMLのように `onClick`などで設定します。

// render() の中
<button onClick={this.itemClicked}>OK</button>

この時、メソッドの引数の型が一致していないとエラーになる点に注意しましょう。

一覧に戻る