React Hooks で作る要素の外側をクリックすると閉じるドロップダウン

gaji-staff

2022.1.13

実践と知見

はじめに

こんにちは。親から送られてくる家庭菜園の動画に癒されている kimizuy です。

今回は要素の外側をクリックすると閉じるドロップダウンのコンポーネントを React Hooks で実装した例を紹介します。

紹介するコンポーネントは以下のような動きになります。

「Toggle dropdown」を押すとドロップダウン（メニューリスト）を表示する
ドロップダウンの外側をクリックするとドロップダウンが閉じる

Codesandbox のデモも用意しました。実際に触って試してみてください。

tldr

さっそくドロップダウンコンポーネントの実装例を紹介します。

useState でドロップダウンの表示・非表示の状態を管理しています。また useRef でドロップダウンの要素を参照し、useEffect で要素外のクリックを検知することでメニューを閉じられるようにしました。

function Dropdown() {
  const [showDropdown, setShowDropdown] = useState(false);
  const dropdownListRef = useRef<HTMLUListElement>(null);

  useEffect(() => {
    const handleClickToCloseDropdown = (event: any) => {
      const element = dropdownListRef.current;
      if (!showDropdown || element?.contains(event.target)) return;
      setShowDropdown(false);
    };

    window.addEventListener("click", handleClickToCloseDropdown);
    return () => {
      window.removeEventListener("click", handleClickToCloseDropdown);
    };
  }, [showDropdown, dropdownListRef]);

  return (
    <div className="DropdownContainer">
      <button
        type="button"
        onClick={() => {
          setShowDropdown((prevState) => !prevState);
        }}
      >
        Toggle dropdown
      </button>

      {showDropdown && (
        <ul ref={dropdownListRef} className="DropdownList">
          <li className="Item">
            <button onClick={() => console.log("item 1 clicked!")}>
              item 1
            </button>
          </li>
          <li className="Item">
            <button onClick={() => console.log("item 2 clicked!")}>
              item 2
            </button>
          </li>
        </ul>
      )}
    </div>
  );
}