【React】useRefを活用して対象要素以外のイベントを捕捉する - Qiita

概要 例えばWeb画面上で、入力や選択操作の途中で他のところをクリックされた時に、イベント捕捉したいということがあると思います。素のJavaScriptだとJavaScriptで特定の要素以外をクリックした時のイベント【jQuery不要】のように、addEventListenerを追加し、その中でidやclassで判定をする実装が考えられます。 ではReactで、例えば対象の要素以外がクリックされた時を捕捉したい、という場合はどうすれば良いか。ということで今回の記事になります。 対応 Detect click outside React componentの記事に色々対応方法が紹介されていますが、個人的にはuseRefを活用した方法が良いかなと感じました。リスナーの中ではrefを指定した要素を取得し、クリックされた要素がrefの要素かという判定を行います。 実装サンプル サンプルで、ヘッダ

[stosto826]

“ useEffect(() => { document.addEventListener("mousedown", handleClickOutside); return () => document.removeEventListener("mousedown", handleClickOutside); }, []); const handleClickOutside = (e) => { if (!headerRef.current.contains(e.target)) { alert("ヘッダー以外がクリックされまし