javascript - 点击 OutSide 关闭侧边栏 reactjs

问题描述

我在侧边栏外部单击时创建了一个函数，它将隐藏它，并且我还有一个按钮可以切换显示和隐藏侧边栏。但是当我将它们组合在一起时，按钮无法正常工作，它只显示侧边栏但无法关闭它，只有当我点击外部时它才会关闭侧边栏

点击 OutSide 关闭功能：

     const ref = useRef(null);
  useEffect(() => {
    document.addEventListener("mousedown", Clickout);
    return () => {
      document.removeEventListener("mousedown", Clickout);
    };
  }, []);

  const Clickout = (eve) => {
    if (ref.current && !ref.current.contains(eve.target)) {
      setShow(false);
    }
  };

我的回归：

 return (
    <header>
      <div className="head">
        <div className="logo">
          <img src={logo} alt="logo" />
        </div>
        <button
          className="burger"
          onClick={() => {
            setShow(!showMenu);
            console.log("here");
          }}
        >
          <div className={`${showMenu ? "change" : ""} bur1 `}></div>
          <div className={`${showMenu ? "change" : ""} bur2 `}></div>
          <div className={`${showMenu ? "change" : ""} bur3 `}></div>
        </button>
      </div>

      <nav className={showMenu ? "active" : ""} ref={ref}>
        <ul>
          {navItem.map((item) => {
            const { id, url, text } = item;
            return (
              <li key={id}>
                <a href={url}>{text}</a>
              </li>
            );
          })}
        </ul>
      </nav>
    </header>
  );
};

导航栏 CSS：

nav {
  position: fixed;
  right: -100%;
  top: 0;
  width: 60%;
  height: 100vh;
  text-align: center;
  padding-top: 15vh;
  transition: 0.8s ease;
  background-color: blue;
}

nav.active {
  right: 0;
  transition: 0.5s;
}

谢谢你。

标签： javascripthtmlcssreactjs

以这种方式更新状态setShow(!showMenu)不会立即更新状态。而是安排更新（您可以阅读文档）。当您setState依赖于先前的状态（在这种情况下showMenu取决于先前的状态）时，请使用此技术：(prev) => setState(!prev)代替。因此，只需更新您的onClick内容即可解决问题。

<button className="burger"
        onClick={() => {
            (prevShowMenu) => setShow(!prevShowMenu)
        }}>

（如果这有帮助，请在评论中告诉我）

javascript - 点击 OutSide 关闭侧边栏 reactjs

问题描述

解决方案

推荐阅读