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

概要

例えばWeb画面上で、入力や選択操作の途中で他のところをクリックされた時に、イベント捕捉したいということがあると思います。素のJavaScriptだとJavaScriptで特定の要素以外をクリックした時のイベント【jQuery不要】のように、addEventListenerを追加し、その中でidやclassで判定をする実装が考えられます。
ではReactで、例えば対象の要素以外がクリックされた時を捕捉したい、という場合はどうすれば良いか。ということで今回の記事になります。

対応

Detect click outside React componentの記事に色々対応方法が紹介されていますが、個人的にはuseRefを活用した方法が良いかなと感じました。リスナーの中ではrefを指定した要素を取得し、クリックされた要素がrefの要素かという判定を行います。

実装サンプル

サンプルで、ヘッダー要素以外がクリックされたかという判定を例にします。

Header.js

export default function Header() {
  const headerRef = useRef();

  useEffect(() => {
    document.addEventListener("mousedown", handleClickOutside);
    return () => document.removeEventListener("mousedown", handleClickOutside);
  }, []);

  const handleClickOutside = (e) => {
    if (!headerRef.current.contains(e.target)) {
      alert("ヘッダー以外がクリックされました");
    }
  };

  return (
    <div ref={headerRef}>
     ・
     ・
    </div>
  );
}

ヘッダー要素以外がクリックされると、以下のイメージのようにalertが表示されます。