如何使用自己的 useOnOutsideClick 钩子关闭下拉菜单？答案

【问题标题】：How to close dropdown menu using own useOnOutsideClick hook?如何使用自己的 useOnOutsideClick 钩子关闭下拉菜单？
【发布时间】：2022-01-14 09:11:25
【问题描述】：

我的移动下拉菜单出现问题。我想通过单击按钮和下拉项的外部（某处，比如上面的标题）来关闭下拉菜单。

这是我的 example.

菜单

const Menu = () => {
  const [isMobileNavOpen, setMobileNavState] = useState(false);

  const mobileNavRef = useRef();

  useOnOutsideClick(mobileNavRef, () => {
    if (isMobileNavOpen) setMobileNavState(false);
  });

  const toggleMobileNav = () => {
    setMobileNavState(!isMobileNavOpen);
  };

  return (
    <div>
      <div className="dropdown" ref={mobileNavRef}>
        <button
          className="dropdown-btn"
          onClick={toggleMobileNav}
          type="button"
        >
          DROPDOWN BUTTON
        </button>
        {isMobileNavOpen && (
          <div
            className="dropdown-menu"
            onClick={() => setMobileNavState(false)}
          >
            <a className="dropdown-item" href="#">
              Item1
            </a>
            <a className="dropdown-item" href="#">
              Item2
            </a>
          </div>
        )}
      </div>
    </div>
  );
};

我的钩子 useOnClickOutside

export const useOnOutsideClick = (ref, callback) => {
  const handleClick = (e) => {
    if (ref.current && ref.current.contains(e.target)) {
      callback();
      console.log("click");
    }
  };

  useEffect(() => {
    document.addEventListener("click", handleClick);

    return () => {
      document.removeEventListener("click", handleClick);
    };
  });
};

请任何帮助！

【问题讨论】：

标签： javascript reactjs react-hooks

【解决方案1】：

翻转 useOutsideClick 钩子的包含逻辑。您想检查来自 not 的点击事件是否来自 ref 附加到的目标元素内。

const handleClick = (e) => {
  if (!ref.current?.contains(e.target)) {
    callback();
    console.log("click");
  }
};

整个钩子

export const useOnOutsideClick = (ref, callback) => {
  const handleClick = (e) => {
    if (!ref.current?.contains(e.target)) {
      callback();
      console.log("click");
    }
  };

  useEffect(() => {
    document.addEventListener("click", handleClick);

    return () => {
      document.removeEventListener("click", handleClick);
    };
  });
};

【讨论】：