使用 onClick 功能打开的可滑动抽屉 (material ui)

Question

面临的问题： 在文档的代码 (https://codesandbox.io/s/cnvp4i?file=/demo.tsx) 中，抽屉在单击顶部的“打开”按钮时被触发并打开。但是，我希望在单击抽屉时触发并打开抽屉。（点击函数）

我的尝试：我尝试将 onClick 函数附加到 StyledBox 和 SwipeableDrawer 组件 (https://codesandbox.io/s/cnvp4i?file=/demo.tsx)，但没有触发 onClick 函数，也没有任何反应发生。我还尝试在组件标签中包含 div 标签以直接触发 DOM ，例如：

<SwipeableDrawer>
    <div onClick={toggleDrawer(true)}></div>
</SwipeableDrawer>

我需要的：如果可以修改文档代码(https://codesandbox.io/s/cnvp4i?file=/demo.tsx)直接点击抽屉就可以触发抽屉的代码片段有效，将不胜感激。

Answer 1

将 pointerEvents: "all" 添加到 <StyledBox /> 将捕获用户事件，例如 onClick 在这种情况下。

此外，你不需要 div 里面 <SwipeableDrawer />，你只需要传递一个道具 onClick={toggleDrawer(!open)} 来切换抽屉的状态。

Codesandbox link

使用 onClick 功能打开的可滑动抽屉 (material ui)

Swipeable Drawer to open with onClick function (material ui)

javascript

reactjs

material-ui