使用 onClick 功能打开的可滑动抽屉（材质 ui）答案

【问题标题】：Swipeable Drawer to open with onClick function (material ui)使用 onClick 功能打开的可滑动抽屉（材质 ui）
【发布时间】：2022-08-15 02:34:30
【问题描述】：

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

我尝试过的：我尝试将 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），以便在直接单击抽屉时触发抽屉或可以工作的代码 sn-p，将不胜感激。

标签： javascript reactjs material-ui

【解决方案1】：

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

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

Codesandbox link

【讨论】：

【解决方案2】：

请注意，如果您希望同时允许通过单击打开和通过触摸绘图打开（例如，为触摸和桌面设备使用相同的抽屉），目前这是不可能的。触摸绘图一放就禁用

<StyledBox
  sx={{
    ...
    pointerEvents: 'all',
  }}
>

请参阅https://github.com/mui/material-ui/issues/30805 中的确认信息

【讨论】：