点击外部时关闭react-pro-sidebar

Question

这是代码

import { ProSidebar } from 'react-pro-sidebar';
...
const [toggle, setToggle] = useState(false);
<ProSidebar toggled={toggle} breakPoint='md' ... >
...

当切换为 false 时，侧边栏将关闭。

如何在点击外部时关闭侧边栏？

需要标准编码。不是斧头木匠。

您可以在此在线网站上查看详细信息。

https://healer-nft-game.onrender.com

Answer 1

react-pro-sidebar 提供了一个名为 onBackdropClick 的 prop 函数来实现此目的。您可以在该函数内设置切换状态更改就足以完成此操作。

<Sidebar
    toggled={toggle}
    onBackdropClick={() => setToggle((prev) => !prev)}
  >