在外部单击时关闭持久性材料UI抽屉

Question

我想用Drawer component在Material-UI React。我希望里面的状态Drawer component在关闭Drawer组件时不应该丢失，因此我传入variant="persistent"了Drawer组件。

现在的问题是，默认情况下，抽屉Persistent Drawer不提供抽屉，因此我无法在外部点击时将其关闭。我也尝试过，但仍然无法正常工作。backdrop functionalitytemporary{{ModalProps={{ onBackdropClick: this.toggleDrawer }} }}

有什么解决方法吗？

材质用户界面版本：1.0.0

谢谢

CodeSandbox链接

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当在抽屉外单击时，该函数将被自动调用，现在它给出了reason为什么被调用的原因：

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

event：回调的事件源。

reason: 可以是: "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>

Answer 2

我花了一些时间来解决这个问题，但我发现了一个非常有用的解决方案，就是将变体更改为 Temporary 并使用 de onEscapeKeyDown 和 onBackdropClick 如下：

  <Drawer
    variant="temporary"
    onEscapeKeyDown={handleDrawerClose}
    onBackdropClick={handleDrawerClose}
    open={open}
    ...rest of your code...

Answer 3

MUI v5中的工作解决方案：

执着的Drawer

用于ClickAwayListener了解用户何时在Drawer. 您还需要设置mouseEvent="onMouseDown"，否则onClickAway在用户单击打开按钮后会触发回调，并在打开按钮Drawer之前立即关闭。

<ClickAwayListener
  mouseEvent="onMouseDown"
  touchEvent="onTouchStart"
  open={open}
  onClickAway={() => open && setOpen(false)}
>
  <Drawer variant="persistent" {...props} />
</ClickAwayListener>

暂时的Drawer

<Drawer
  variant="temporary"
  open={open}
  onClose={(_, reason) =>
    reason === 'backdropClick' && setOpen(false)
  }
>

现场演示

Answer 4

您可以ClickAwayListener为此使用组件。
https://material-ui.com/api/click-away-listener/

import ClickAwayListener from '@material-ui/core/ClickAwayListener';

const drawer = (
      <ClickAwayListener onClickAway={this.handleDrawerClose}>
        <Drawer
          variant="persistent"
          anchor={anchor}
          open={open}
          classes={{
            paper: classes.drawerPaper
          }}
        >
          <div className={classes.drawerHeader}>
            <IconButton onClick={this.handleDrawerClose}>
              {theme.direction === "rtl" ? (
                <ChevronRightIcon />
              ) : (
                <ChevronLeftIcon />
              )}
            </IconButton>
          </div>
          <Divider />
          <List>a asdasd</List>
          <Divider />
          <List>asdasd</List>
        </Drawer>
      </ClickAwayListener>
    );

https://codesandbox.io/s/072ny1rjw