Закрывать ящик пользовательского интерфейса для сохраняемого материала при нажатии кнопки

Question

Я пытаюсь использовать Drawer component в Material-UI React. Я хочу, чтобы это состояние внутри Drawer component не потерялось при закрытии компонента Drawer, поэтому я передаю variant="persistent" в компоненте Drawer.

Теперь проблема в том, что Persistent Drawer не обеспечивает backdrop functionality по умолчанию в отличие от temporary ящиков, поэтому я не могу закрыть его при внешнем щелчке. Я пытался {{ModalProps={{ onBackdropClick: this.toggleDrawer }} }} также, но все еще не работает.

Есть ли обходной путь для этого?

Версия пользовательского интерфейса материала: 1.0.0

Спасибо

CodeSandbox link

Answer 1

Для этого вы можете использовать компонент ClickAwayListener.
https://material -ui.com / апи / нажмите вдали слушатель /

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 2

Вы можете реализовать это самостоятельно, добавив div в appFrame, который имеет 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