イベントハンドリング
次にイベントのハンドリングの方法について解説します。ここはReactの良さがよく分かる部分だと思います。通常のJavaScriptの場合、以下のようなコードによって、onclickイベントをloginAuthenticaitonメソッドでハンドルします。あるいはjQueryであれば.onを利用するといった具合でしょう。
<button onclick=“loginAuthentication()“> Login </button>
このような表記方法では、どこにでもメソッドを記述できてしまうため、アプリが大きくなるにつれて、どうしてもコードが複雑になってしまうという問題がつきまといます。
Reactを利用することでコンポーネントクラスにイベント処理をまとめることができ、この複雑さ問題を解決できます。以下のサンプルプログラムで確認しましょう。1から30までの数字のルーレットです。
import React from 'react'; import ReactDOM from 'react-dom'; // Reactコンポーネントの宣言 class Roulette extends React.Component { constructor(props) { super(props); this.state = { number: 1, isStart: false}; this.toggleButton = this.toggleButton.bind(this); // (1) } // state.numberを更新するメソッド shuffle(){ var rand = Math.floor(Math.random() * 30) + 1; this.setState({number: rand}); } // ルーレットを開始するメソッド startRoulette(){ this.interval = setInterval(() => this.shuffle(), 50); } // ルーレットを停止するメソッド stopRoulette(){ clearInterval(this.interval); } // ルーレット開始、または停止とイベントに合わせてボタンのラベルを切り替える toggleButton(){ if(this.state.isStart){ this.stopRoulette(); } else { this.startRoulette(); } this.setState((prevState) => ({ isStart : !prevState.isStart })); } // buttonのonClickイベントにtoggleButtonをバインド // Reactコンポーネントを返す render() { return ( <div> <p>number : {this.state.number}</p> <button onClick={this.toggleButton}> {this.state.isStart ? 'Stop' : 'Start'} </button> </div> ); } } // DomにReact要素を挿入 ReactDOM.render( <Roulette />, document.getElementById('root') );
![図3 実行結果](http://cz-cdn.shoeisha.jp/static/images/article/9928/9928_003.png)
Reactを使うことで、コンポーネント内にイベントハンドラをまとめることができるため、DOM生成時にリスナーを登録する必要がなくなります。コーディングの注意すべきこととしては、(1)のようにハンドラとなるメソッドをクラスにbindする必要がある点です。bindすることで、toggleButtonメソッドがclickイベントハンドラとして登録可能になります。bindを忘れてしまうとonclickイベントが発生したときに、undefinedとなります。
constructor(props) { super(props); this.state = { ... }; this.[hadlerName] = this.[functionName].bind(this); } handlerName: イベントハンドラ名, functionName: 関数オブジェクト名
create-react-appを使ってアプリを作成した場合は、以下のように記述することで、bindせずにイベントハンドラを設定することもできます。
<button onClick={(e) => this.toggleButton(e)}> {this.state.isStart ? 'Stop' : 'Start'} </button>
あとがき
今回は、いくつかのサンプルを交えてコンポーネントに関する重要な概念を紹介しました。
次回はサードパーティー製のコンポーネントセットであるMaterial-UIを利用して、デザイン性のアプリをクイックに開発する手法を紹介します。