
「React入門」の前回はReactのstateについて解説を行いました。
今回はReactのイベントについて解説を行なっていきます。
以下は入力欄にテキストを入力しておき、入力ボタンをクリックすると「入力値:」の横に入力内容が反映される簡単なサンプルです。
See the Pen React イベント by Kazuma Nishihata (@to-r) on CodePen.
それでは、各パートについて順番に解説していきましょう。
まず、イベントはJSX内で指定を行います。
今回は以下のようにボタンに対してonClick属性を利用してイベントを設定しています。
最近のJavaScriptフレームワークではこのようにViewなどのHTMLに直接イベントを記述するのが一般的です。
イベントにはメソッド名の後ろにbind(this)を追加して指定しておきます。これはメソッド内でコンポーネント内にアクセスするために必要な記述です。
入力値:{this.state.myText}
入力要素に指定されているref属性は後ほど入力フィールドの値を参照するための属性です。
Reactではクリック以外のイベントも基本的にはJSX内でonKeyupやonMouseoverと言った感じにonXxxで指定していくことができます。
クリックされた後はsetMyTextメソッドが実行されており、state.myTextに入力内容が反映され再描画処理が発生します。
setMyText(){
this.setState({
myText : this.refs.myText.value
});
this.refs.myText.value='';
}
JSX内のbind(this)を削除
constructor内で以下のように設定しておけばJSX内のbind(this)は省略可能です。
constructor(props) {
super(props);
this.state = {
myText : null
};
this.setMyText = this.setMyText.bind(this);
}
JSX内にbind(this)を記述すると、描画のたびに関数を生成しますのでこちらの記述のほうがスマートです。
それでは、次回はReactのライフサイクルについて解説を行います。