Javascript 为什么我的导航条打开状态没有在窗口addeventlistener(Reaction Js)中更新

发布于03月13日

条件有效，但由于某种原因，setNavbarOpen(False)不起作用

以下是代码:

import { useState } from 'react';

const Navbar = () => {
  const [navbarOpen, setNavbarOpen] = useState(false);

  window.addEventListener('click', (e)=> {
    e.stopImmediatePropagation()
    const navbar = document.querySelector('.navbar')
    if (!navbar.contains(e.target)) {
      setNavbarOpen(false)
      console.log('done')
    }
  })
  return (
    <nav className="navbar">
      <button
        className="toggle"
        onClick={() => setNavbarOpen((prev) => !prev)}
      >
        {navbarOpen ? 'close' : 'open'}
      </button>
      <ul className={`menu-nav${navbarOpen ? ' show-menu' : ''}`}>
        <li>change background</li>
      </ul>
    </nav>
  );
};
export default Navbar;

我希望只要我点击屏幕上的任何地方，就可以关闭导航栏.

推荐答案

您的单击事件侦听器是一个无意的副作用.它不是作为Reaction组件生命周期的一部分创建的.

将其移动到useEffect钩子中以实例化侦听器.不要忘记返回一个清除函数来删除侦听器.

const Navbar = () => {
  const [navbarOpen, setNavbarOpen] = React.useState(false);

  React.useEffect(() => {
    const handler = (e) => {
      e.stopImmediatePropagation();
      const navbar = document.querySelector(".navbar");
      if (!navbar.contains(e.target)) {
        setNavbarOpen(false);
        console.log("done");
      }
    };

    window.addEventListener("click", handler);
    () => {
      window.removeEventListener("click", handler);
    };
  }, []);

  return (
    <nav className="navbar">
      <p>Click outside me to toggle closed</p>
      <button className="toggle" onClick={() => setNavbarOpen((prev) => !prev)}>
        {navbarOpen ? "close" : "open"}
      </button>
      <ul className={`menu-nav ${navbarOpen ? "show-menu" : ""}`}>
        <li>change background</li>
      </ul>
    </nav>
  );
};

const rootElement = document.getElementById("root");
const root = ReactDOM.createRoot(rootElement);

root.render(
  <React.StrictMode>
    <Navbar />
  </React.StrictMode>
);

.navbar {
  border: 1px solid green;
}

.menu-nav {
  overflow: hidden;
  height: 0;
  margin: 0;
  transition: all;
}

.show-menu {
  height: auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>
<div id="root" />