Reactでdocumentやwindowのイベントを設定する

2017.03.30.木 JavaScript

takedaです。
今回は、JavaScriptのViewのライブラリである、Reactについて書きます。
Reactで、JavaScriptのdocumentやwindowのイベントを扱う方法について説明します。

React及びES2015以降の構文をある程度理解している前提で進めます。ご了承ください。

icon_js

Reactのイベント記述について

Reactを利用してイベントを記述する場合、以下のようにJSX記法でイベントを設定します。

しかし、documentやwindowは元々存在するオブジェクトなので、少し工夫をする必要があります。

通常なら…

通常、documentやwindowにイベントを割り当てる場合は、次のように行います。
次のようにすることで、ウィンドウの大きさを変えると、コンソールにイベントオブジェクトの内容が表示されます。

別のリスナーを入れ替えて割り当てる場合は、イベント解除も考える必要があります。

JSXでdocumentやwindowにイベントを割り当てると…

JSX記法で、documentやwindowのイベントを扱えるようにしたのが、以下のコードです。
通常の場合と同じように、ウィンドウの大きさを変えると、コンソールにイベントオブジェクトの内容が表示されます。

これだと、onResizeで割り当てているリスナーを入れ替えても、自動で元のリスナーのイベント解除を行います。イベント解除を考える必要がなくなるわけです。


EventListenerコンポーネントは、以下のように作成しました。

ネットで調べると、componentDidMount・componentWillUnmountを利用して、イベントの登録・解除を行えば良いということがわかりました。

汎用的に使えるコンポーネントにしたかったので、propsに渡されたonで始まるkeyの値をすべてイベントとして扱うようにしました。
なので、EventTargetインターフェースを持つ(addEventListenerとremoveEventListenerが利用できる)オブジェクトであれば、EventListenerコンポーネント自体がイベントを知らなくても使うことができます。

ちなみに

Reactとは直接関係ないですが、今回、記事にするにあたって、EventListenerコンポーネントをLodashを使わないコードに書き直しました。
最近では、Object.keys()String.prototype.startsWith()などの機能が標準で用意されています。なので、小さなライブラリを作成する程度であれば、依存関係を減らすためにも、Lodashなどを使わなくても良いかもしれません。




キー・ポイントでは、いろいろなライブラリを使いこなすエンジニアを募集しています。



コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です