React.jsでwindowやdocumentやjQueryのイベントを使う方法

react

私の愛しいアップルパイへ

JavascriptライブラリーのReact.js便利ですよね。DatabaseとAjaxをガリガリ使って画面を更新していくようなWebサービスを作るときに重宝しています。今かなりハマっています。

フレームワークといえば規約やルールがあるので実装に悩むことが珍しくありませんが、React.jsでありがちなのが特定のDOMと連動してwindowやdocument、jQueryの独自イベントを使いたいときではないでしょうか。

例えば、jQuery UIを使いたいときや、特定の要素以外の場所をクリックしたときにポップアップを閉じたいとき、Windowがリサイズされたときに特定の処理を走らせたいときなどです。

今日はそのような処理をReact.jsではどう書くか解説していきます。

React.jsでwindowやdocumentやjQueryのイベントを使う方法

▼React.jsだと通常DOMの出力はこのように各Componentのrenderメソッドに記述していきます。

ただし、このタイミングではDOMが生成される前なので、ここに書いたDOMに対して後から独自イベントを実行したいときなどは適しません。

▼そこで登場するのが、DOM生成直後をフックできるcomponentDidMountメソッドです。

このメソッドを使えば、DOMがレンダリングされた直後に処理を追記できます。ですから、ここで特定の要素に対する処理が書けるのです。

▼例えば、このDOMに連動して発火するdocumentへのイベント登録などはここに書いておくといいでしょう。これはポップアップを閉じるイベント登録の例です。

▼もしくは、resizes処理などもここに書いておくと良いでしょう。

▼jQuery UIのdatepickerを使うときなどもここに書きます。

▼また、DOMがアンマウントされたときには登録したイベントを解除しておくと良いでしょう。componentWillUnmountを使えば、このComponentがアンマウントされた直後の処理を追記できます。

これでReact.jsでもwindowやdocumentやjQueryのイベントを使うことができるようになります。

貴下の従順なる下僕 松崎より

著者画像

システム系の専門学校を卒業後、システム屋として6年半の会社員生活を経て独立。ブログ「jMatsuzaki」を通して、小学生のころからの夢であった音楽家へ至るまでの全プロセスを公開することで、のっぴきならない現実を乗り越えて、諦めきれない夢に向かう生き方を伝えている。