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>
この時、メソッドの引数の型が一致していないとエラーになる点に注意しましょう。