コンポーネント間のpropsの受け渡し - React入門

React入門」の前回はReactのstateについて解説を行いました。

今回はReactのイベントについて解説を行なっていきます。

以下は入力欄にテキストを入力しておき、入力ボタンをクリックすると「入力値:」の横に入力内容が反映される簡単なサンプルです。

See the Pen React イベント by Kazuma Nishihata (@to-r) on CodePen.

それでは、各パートについて順番に解説していきましょう。

まず、イベントはJSX内で指定を行います。

今回は以下のようにボタンに対してonClick属性を利用してイベントを設定しています。
最近のJavaScriptフレームワークではこのようにViewなどのHTMLに直接イベントを記述するのが一般的です。

イベントにはメソッド名の後ろにbind(this)を追加して指定しておきます。これはメソッド内でコンポーネント内にアクセスするために必要な記述です。

入力要素に指定されているref属性は後ほど入力フィールドの値を参照するための属性です。
Reactではクリック以外のイベントも基本的にはJSX内でonKeyupやonMouseoverと言った感じにonXxxで指定していくことができます。

クリックされた後はsetMyTextメソッドが実行されており、state.myTextに入力内容が反映され再描画処理が発生します。

JSX内のbind(this)を削除

constructor内で以下のように設定しておけばJSX内のbind(this)は省略可能です。

JSX内にbind(this)を記述すると、描画のたびに関数を生成しますのでこちらの記述のほうがスマートです。

それでは、次回はReactのライフサイクルについて解説を行います。