Question

在此组件中，我创建了一个按钮，该按钮将显示和隐藏侧边栏菜单。打的是我必须单击两次按钮才能再次显示侧边栏。

问题的原因可能是覆盖的className和useEffect。如果我删除了多余的className，它可能会起作用，但是，我将无法通过单击页面上的任意位置来关闭菜单，这就是为什么我包含了useEffect代码的原因。

我该如何解决？还有什么有用的提示和资源可供我参考，以便将来避免相同的问题？

const modalRoot = document.getElementById("modal-root");

const Modal = props => {
  return ReactDOM.createPortal(
    <div className="overlay">
      <div className="sidebar-container">{props.children}</div>
    </div>,
    modalRoot
  );
};

export default function App() {
  const [open, setOpen] = React.useState(false);
  useEffect(() => {
    const overlay = document.querySelector(".overlay");
    window.onclick = e => {
      if (e.target === overlay) {
        overlay.style.display = "none";
      }
    };
  });
  return (
    <div className="App">
      <button onClick={() => setOpen(!open)}>Try it</button>
      {open && <Modal in={open}>It works!</Modal>}
    </div>
  );
}

这里是测试问题的链接：Code Sandbox

Answer 1

这是因为在将window.click事件处理程序隐藏在模态之后，您需要setOpen（false）

if (e.target === overlay) {
        console.log(e.target);
        overlay.style.display = "none";
        setOpen(false);
      }

Answer 2

在这里您必须将open设置为false。请在下面找到我所做的更改，它正在起作用。查找正在运行的演示HERE

  export default function App() {
  const [open, setOpen] = React.useState(false);
  useEffect(() => {
    const overlay = document.querySelector(".overlay");
    window.onclick = e => {
      if (e.target === overlay) {
        overlay.style.display = "none";
        setOpen(!open); // Change is here
      }
    };
  });
  return (
    <div className="App">
      <button onClick={() => setOpen(!open)}>Try it</button>
      {open && <Modal in={open}>It works!</Modal>}
    </div>
  );
}

切换两次以打开和关闭侧边栏菜单

2 个答案: