イベントハンドリング
次にイベントのハンドリングの方法について解説します。ここは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')
);
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を利用して、デザイン性のアプリをクイックに開発する手法を紹介します。
