javascript - 在外部单击时关闭持久性 Material UI抽屉

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

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

有什么解决方法吗？

Material 用户界面版本:1.0.0

谢谢

CodeSandbox link

最佳答案

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

关于javascript - 在外部单击时关闭持久性 Material UI抽屉，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/54060096/