单击外部时关闭持久 MUI 抽屉

Question

我正在尝试在 MUI React 中使用 Drawer component。我希望Drawer component 中的状态在关闭抽屉组件时不应该丢失，因此我在抽屉组件中传递variant="persistent"。

现在，问题是Persistent Drawer 默认情况下不提供backdrop functionality，这与temporary 抽屉不同，因此我无法在外部点击时关闭它。 我也试过{{ModalProps={{ onBackdropClick: this.toggleDrawer }} }}，但还是不行。

有什么解决方法吗？

MUI 版本：1.0.0

谢谢

CodeSandbox link

Answer 1

您可以通过在 appFrame 中添加一个 div 来实现这一点，该 div 有一个 onClick 可以像这样关闭抽屉：

<div className={classes.appFrame}>
{this.state.open ? 
    <div style={{ position: "fixed", zIndex: 1, left: 0, right: 0, top: 0, bottom: 0 }} 
        onClick={() => this.handleDrawerClose()} /> 
    : null
}
// rest of your code

Answer 2

您可以为此使用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

Answer 3

为了让搜索者登陆这个问题。如果您在使用ClickAwayListener 时遇到问题并且没有使用variant='persistent'。试试这个：为ModalPropsonBackdropClick提供一个切换功能

<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 4

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

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

Answer 5

我不确定它是否适用于 1.0.0 版本，但这种方法对我有用，注意到我正在使用“material-ui/core @4.10”中的抽屉

<Drawer ... open={this.state.open} onClose={() => this.handleDrawerClose()}>
....
</Drawer>

Answer 6

最近发现了这个简洁的 useOnClickOutside 钩子 => CodeSandBox 并用它替换了所有我的。比向 dom 中添加元素更优雅，并且非常易于与 Mui 一起使用，因为您可以将 ref prop 传递给任何 Material-ui 组件。

Answer 7

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 8

您可以在抽屉的打开属性中使用useState并在onClose属性中设置为false：

onClose={() => setOpen(false)}

在本例中，useState 名称为 ** open ** 和 ** setOpen **