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

Question

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

问题的原因可能是覆盖类名和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>
);
}

下面是用于测试问题的链接：代码沙盒

Answer 1

这是因为在窗口上隐藏模态后需要设置Open(false(。

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

Answer 2

在这里你必须设置打开假。请在下面找到我所做的更改，它正在工作。在此处查找正在运行的演示

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>
);
}