javascript - 单击外部关闭 Persistent Material UI Drawer

Question

我正在尝试在 Material UI React 中使用 Drawer 组件。我希望 Drawer 组件 中的状态不会在关闭 Drawer 组件时丢失，因此我在 Drawer 组件中传递了 variant="persistent"。

现在，问题是 Persistent Drawer 默认情况下不提供 backdrop functionality ，这与 temporary 抽屉不同，因此我无法关闭它在外面点击。 我也尝试了 {{ModalProps={{ onBackdropClick: this.toggleDrawer }} }} 但仍然无法正常工作。

有解决办法吗？

Material UI 版本:1.0.0

CodeSandbox link

Answer 1

为了搜索者登陆这个问题。如果您在使用 ClickAwayListener 时遇到问题并且没有使用 variant='persistent'。试试这个:为 ModalProps onBackdropClick

提供切换功能

<Drawer
  open={drawerIsOpen}
  ModalProps={{ onBackdropClick: this.toggleDrawer }}
>
  <MenuItem>drawer item 1</MenuItem>
</Drawer>

2021 年 7 月更新:

我最近将 material-ui/core 更新到版本 4.12.1 并注意到 onBackdropClick 已被弃用。相反，他们添加了对此功能的原生支持，onClose 函数将在抽屉外单击时自动调用，现在它给出了调用它的原因:

签名: function(event: object, reason: string) => void

event:回调的事件源。

原因:可以是:“escapeKeyDown”、“backdropClick”

请参阅此处示例:https://material-ui.com/api/modal/向下滚动到 onBackDropClicked - 它对抽屉的作用与对

改为这样做:

<Drawer
  open={drawerIsOpen}
  onClose={{ (ev, reason) => this.setState({ drawerIsOpen: false }) }}
>
  <MenuItem>drawer item 1</MenuItem>
</Drawer>