单击导航链接后无法关闭全屏菜单

Question

问题当我单击链接时，全屏菜单不想关闭。如果我使用 html 标签 a 并且一切正常，则 NavLink 元素会出现此问题。这里我有一个功能，可以让我在按下其中一个链接时关闭。我之前提到过它仅适用于 href 标签。import { useEffect } from "react";export const useOnClickOutside = (ref, handler) => {  useEffect(() => {    const listener = (event) => {      if (!ref.current || ref.current.contains(event.target)) {        return;      }      handler(event);    };    document.addEventListener("mousedown", listener);    return () => {      document.removeEventListener("mousedown", listener);    };  }, [ref, handler]);};这是主菜单组件const MobileMenu = () => {  const [open, setOpen] = useState(false);  const ref = useRef();  useOnClickOutside(ref, () => setOpen(false));  return (    <MobileMenuWrapper ref={ref}>      <BurgerIcon open={open} setOpen={setOpen} />      <MobileMenuList open={open} setOpen={setOpen}>        <MenuLinks />      </MobileMenuList>    </MobileMenuWrapper>  );};和链接组件const MenuLinks = () => {  return (    <>      <ul>        <li>          <NavLink to="/"> Home</NavLink>        </li>        <li>          <NavLink to="/albums">Albums</NavLink>        </li>        <li>          <NavLink to="/addAlbum">Add Album</NavLink>        </li>        <li>          <NavLink to="/about">About</NavLink>        </li>        <li>          <NavLink to="/contact">Contact</NavLink>        </li>      </ul>    </>  );};

Answer 1

经过几个小时的搜索错误后我解决了它

const [open, setOpen] = useState(false);

  const ref = useRef();

  // on link click change open to false

  useOutsideClick(ref, () => {

    if (open) setOpen(false);

  });

  return (

    <MobileMenuWrapper ref={ref}>

      <BurgerIcon open={open} setOpen={setOpen} />

      <MobileMenuList open={open} setOpen={setOpen}>

        <MenuLinks />

      </MobileMenuList>

    </MobileMenuWrapper>

  );

和钩子

export const useOutsideClick = (ref, callback) => {

  const handleClick = (e) => {

    if (ref.current && ref.current.contains(e.target)) {

      callback();

    }

  };

  useEffect(() => {

    document.addEventListener("click", handleClick);

    return () => {

      document.removeEventListener("click", handleClick);

    };

  });

};