在外部點擊或捲動時關閉模式或下拉式選單。

是否曾經建立過模態框或下拉式選單，並努力弄清楚當使用者在其外部點擊時如何將其關閉？是的..

這裡有一個很酷的 React hook 可以解決這個問題

import { useEffect, useRef } from "react";

const useOutsideClickOrScroll = <T extends HTMLElement>(
  callback: () => void
) => {
  const ref = useRef<T>(null);

  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      if (ref.current && !ref.current.contains(event.target as Node)) {
        callback();
      }
    };

    const handleScroll = () => {
      callback();
    };

    document.addEventListener("mousedown", handleClickOutside);
    window.addEventListener("scroll", handleScroll, true);

    return () => {
      document.removeEventListener("mousedown", handleClickOutside);
      window.removeEventListener("scroll", handleScroll, true);
    };
  }, [callback]);

  return ref;
};

export default useOutsideClickOrScroll;

此鉤子使用 useRef 來定位 DOM 元素，並在外部點擊或捲動事件上觸發回調，確保使用 useEffect 進行正確的清理。它會傳回 ref，以便輕鬆附加到任何 DOM 元素。

這是一個範例用法

import React, { useState } from "react";
import useOutsideClickOrScroll from "./useOutsideClickOrScroll";

const Dropdown = () => {
  const [isOpen, setIsOpen] = useState(false);

  const handleClose = () => {
    setIsOpen(false);
  };

  const ref = useOutsideClickOrScroll<HTMLDivElement>(handleClose);

  return (
    <div>
      <button onClick={() => setIsOpen(!isOpen)}>Toggle Dropdown</button>
      {isOpen && (
        <div ref={ref}>
          <p>Dropdown Content</p>
        </div>
      )}
    </div>
  );
};

export default Dropdown;

以上是在外部點擊或捲動時關閉模式或下拉式選單。的詳細內容。更多資訊請關注PHP中文網其他相關文章！