Reactのイベント設定 – React入門

「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='';
}

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

constructor(props) {
  super(props);
  this.state = {
    myText : null
  };
  this.setMyText = this.setMyText.bind(this);
}

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

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