ポップアップのカラーピッカーを React で作っているときに、いくつかの問題に直面したのでまとめておこうと思います。
作ったものは下のGIFのようなカラーピッカーです。
この記事では、カラーピッカー機能を取り除いた、下のポップアップメニューの作り方を紹介します。
完成品の CodePen を先に置いておくので、コピペしたい人はこちらをお使いください。
See the Pen React Popup Menu by ジフォ (@G4RDS) on CodePen.
ポップアップメニューの機能
今回作るポップアップメニューには以下のような機能があります。
- ボタンがクリックされるまでポップアップメニューを表示しない。
- ポップアップメニュー範囲外をクリックすると、ポップアップメニューを閉じる。
- ポップアップメニューの内側をクリックされても、ポップアップメニューは閉じない。
- ポップアップメニューの内側に、ポップアップメニューを閉じるボタンを用意する。
ポップアップメニューを作ろう
Functional Component で作っていきます。
Hooks を使うので、基礎を理解している必要があります。
まずはベースを作ろう
メニューの表示を切り替えるボタンと、メニューを持つコンポーネントを作ります。
// PopupMenu.jsimport'./PopupMenu.scss'constPopupMenu=()=>{return(<divclassName="popup-menu-container"><button>
Toggle Menu
</button><divclassName="popoup-menu"><div>menu</div><button>
Close Menu
</button></div></div>)}適当なスタイルを当てておきます。.popup-menuがレイアウトに影響しないよう、position: absoluteを適用します。
// PopupMenu.scss.popup-menu-container{position:relative;}.popup-menu{position:absolute;z-index:2;width:10rem;margin-top:0.5rem;padding:1rem;background:#fff;border-radius:0.5rem;}メニューの表示を切り替えよう
React Hook の useStateを使って、メニューを表示したり非表示にしたりできるようにします。
// PopupMenu.jsimportReact,{useState}from'react'constPopupMenu=()=>{const[isShown,setIsShown]=useState(false)consthandleToggleButtonClick=()=>{setIsShown(true)}consthandleCloseButtonClick=()=>{setIsShown(false)}return(<divclassName="popup-menu-container"><buttononClick={handleToggleButtonClick}>
Toggle Menu
</button><divclassName={`popup-menu ${isShown ? 'shown' : ''}`}><div>menu</div><buttononClick={handleCloseButtonClick}>
Close Menu
</button></div></div>)}// PopupMenu.scss.popup-menu{transform:scale(0);transform-origin:topleft;transition:transform0.2s;&.shown{transform:scale(1);}}ポップアップメニュー範囲外がクリックされたら閉じるようにしよう
click イベントは通常、クリックされた場所に一番近い要素から遠い要素へ順番にイベントリスナーを実行していきます。
つまり、HTML DOM の一番外側である bodyに設定されたイベントリスナーは、そこに伝播するまでの要素に設定されたイベントリスナーが伝播を止めない限り、どこがクリックされても必ず実行されます。
とりあえず、どこをクリックしても閉じるようにしよう
この機能を実装するには、document.bodyにポップアップメニューを閉じるためのイベントリスナーを設定すれば良さそうです。
consthandleToggleButtonClick=()=>{setIsShown(true)document.body.addEventListener('click',e=>{setIsShown(false)document.body.removeEventListener('click',documentClickHandler)})}しかし、このコードには問題があります。
React DOM の onClick などのイベントリスナーは、HTML DOM のイベントリスナーよりも後で呼ばれることが確定しているため、トグルボタンをクリックした時に isShownが document.bodyに設定したイベントリスナーによって falseになった後、トグルボタンのイベントリスナーが trueにしてしまうのです。
また、isShownを trueにした後、document.bodyにイベントリスナーを再設定してしまいます。
これを解決するには、範囲外イベントリスナーを React DOM イベントリスナーよりも後に実行される場所に設定する必要があります。
それは、documentです。
React DOM は documentにクリックイベントリスナーを設定することで、どの React DOM 要素がクリックされたのかを判断しています。
同じ要素に複数のリスナーが設定されている場合、先に設定されたリスナーから順番に実行されます。
つまり、React DOM と同じ documentにイベントリスナーを設定することで、React DOM のイベントリスナーが処理された後に実行されるようにできるのです。
document.addEventListener('click',e=>{setIsShown(false)document.removeEventListener('click',documentClickHandler)})ポップアップメニューの範囲がクリックされたのなら閉じないようにしよう
現状だとメニューを利用することができないので、ポップアップメニューの範囲内かどうかを判定し、範囲内なら閉じる処理を行わないようにしましょう。
これには、二つの実装方法が考えられます。
- ポップアップメニュー
.popup-menuに、これ以上イベントが伝播しないようにするイベントリスナーを設定する。 documentに設定したイベントリスナーで、クリック対象の要素がポップアップメニュー要素もしくはその子要素であるかどうかを判定する。
簡単なのは前者ですが、React DOM のイベントリスナーで e.stopPropagation()を実行しても、HTML DOM のイベント伝播は止まらないため、機能しません。
面倒ですが、後者の方法で実装します。
ポップアップメニュー要素にアクセスできるようにする
まず、ポップアップメニュー要素を取得するため、useRefフックを使います。
constpopupRef=useRef()// ...<divclassName={`popup-menu ${isShown?'shown':''}`}ref={popupRef}>...</div>
これで、popupRef.currentでポップアップメニュー要素にアクセスできるようになりました。
クリックされた要素がポップアップメニュー要素以下であるかを判定する
popupRef.currentで取得できる Elementのスーパークラスである Nodeには、引数に指定したノードがこのノードの子孫ノード（自分自身を含む）であるかどうかを判定する Node.containsメソッドがあります。
これを使うことで、クリックされた要素がポップアップメニュー要素以下であるかどうかを判定できます。
constdocumentClickHandler=e=>{if(popupRef.current.contains(e.target))returnsetIsShown(false)document.body.removeEventListener('click',documentClickHandler)}ポップアップメニュー内に閉じるボタンを用意しよう
一番初めに紹介したカラーピッカーでは、カラーが選択されたらポップアップメニューを閉じるようにしています。
この機能を実装してみましょう。
閉じるときに、documentに設定したイベントリスナーを削除するのを忘れないようにしましょう！
constdocumentClickHandler=e=>{if(popupRef.current.contains(e.target))returnsetIsShown(false)removeDocumentClickHandler()}constremoveDocumentClickHandler=()=>{document.removeEventListener('click',documentClickHandler)}consthandleCloseButtonClick=()=>{setIsShown(false)removeDocumentClickHandler()}しかし、このコードは正しく動作しません。removeEventListnerは第二引数が同じ参照を指すイベントリスナーを除去するという働きをする関数ですが、documentClickHandlerがReact がレンダリングするたびに新しく生成されてしまうため、イベントリスナーを除去できずに残り続けてしまいます。
これを解決するために、ファイルスコープに documentClickHandler変数を用意し、useEffectで最初のレンダリング後に関数をセットするようにします。
letdocumentClickHandlerconstPopupMenu=()=>{// ...useEffect(()=>{documentClickHandler=e=>{console.log('documentClickHandler')if(popupRef.current.contains(e.target))returnsetIsShown(false)removeDocumentClickHandler()}},[])正しく動作するようになりましたね！
🎉 完成！ お疲れ様でした
React DOM は HTML DOM の要素にセットしているイベントリスナーはダミーで、実際は documentにセットしたイベントリスナーが処理していたとは、まったく気づきませんでした。
今回はメニューの内部も含めて一つのコンポーネントにしましたが、実際に運用する React プロジェクトでは機能だけを提供するコンポーネントを用意して、再利用できるようにすると良いのかなと思います。
最後に宣伝をさせてください！
今年の春ごろに、毎日やりたいことを習慣づけるアプリ「コツコツ忍者」を作りました！
毎日開発する！とか、毎週土日はランニングする！とかの目標を作り、記録することでモチベーションを保つアプリです！
Nuxt.js で作ったもので、何を使っているのかなどを書いた記事もありますので、ぜひそちらもご覧ください。
また、英語リスニング学習アプリを Flutter で開発中です。
ある程度までできたら、事前登録サイトを用意しようと思っていますので、Twitterをフォローしていただけると幸いです！
最後までご覧いただきありがとうございました！
参考文献
- DOMイベントのキャプチャ/バブリングを整理する 〜 JSおくのほそ道 #017
https://qiita.com/hosomichi/items/49500fea5fdf43f59c58 - Event propagation with React bubbling out of order
https://stackoverflow.com/questions/45212840/event-propagation-with-react-bubbling-out-of-order