Question

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

现在，问题在于，Persistent Drawer默认不提供backdrop functionality抽屉，这与temporary抽屉不同，因此我无法通过外部点击将其关闭。我也尝试过{{ModalProps={{ onBackdropClick: this.toggleDrawer }} }}，但仍然无法正常工作。

有什么解决方法吗？

材料UI版本：1.0.0

谢谢

CodeSandbox link

Answer 1

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

  <Drawer
    variant="temporary"
    onEscapeKeyDown={handleDrawerClose}
    onBackdropClick={handleDrawerClose}
    open={open}
    ...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

您可以通过在自己的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 4

一直在与ClickAwayListener纠缠不清，但是它对我不起作用，但是我发现可以。为ModalProps onBackdropClick提供切换功能可以达到目的：

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

Answer 5

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

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

Answer 6

最近发现了这个简洁的useOnClickOutside hook => CodeSandBox，并用它替换了我所有的内容。现在您可以将ref prop传递给任何Material-ui组件，这比在dom中添加元素要优雅得多，并且真的很容易与Mui一起使用。

在外部点击

6 个答案: