Материал интерфейса ClickAwayListener закрывается при нажатии на себя - PullRequest
Новая
       14

Материал интерфейса ClickAwayListener закрывается при нажатии на себя

0 голосов
/ 13 марта 2019

У меня есть выключатель боковой панели дисплея, который появляется внутри Поппера. Итак, в идеале, если вы щелкнете в другом месте (за пределами элемента Popper), Popper должен исчезнуть. Если вы щелкнете внутри элемента Popper, он не должен никуда идти. Когда я нажимаю на текст Switch and Display Sidebar, этот Popper исчезает. Я обернул Поппера <div>, это тоже не помогло.

Поппер https://material -ui.com / API / Поппер /

Switch https://material -ui.com / api / switch /

ClickAwayListener https://material -ui.com / utils / click-away-listener /

Ниже приведен код Поппера 

<ClickAwayListener onClickAway={this.handleClickAway}>
      <div>
        <Popper className={classes.popper} id={id} open={open} placement="bottom-end" anchorEl={anchorEl} transition>
          {({ TransitionProps }) => (
            <Fade {...TransitionProps} timeout={350}>
              <Paper className={classes.SliderBox}>
                <Switch
                  checked={this.state.checkedB}
                  onChange={this.handleChange('checkedB')}
                  value="checkedB"
                  color="primary"
                  onClick={handleDrawer}
                  className={classNames(classes.menuButton, sidebar && classes.hide)}
                />
                Display Sidebar
              </Paper>
            </Fade>
          )}
        </Popper>
        </div>
       </ClickAwayListener>

У меня есть образец здесь (хотя я не мог заставить его работать, я не знаю, почему он дает ошибку при клике) https://codesandbox.io/s/8pkm3x1902

enter image description here

1 Ответ

2 голосов
/ 13 марта 2019

Перемещение ClickAwayListener непосредственно вокруг Fade (а не вокруг Popper), похоже, работает нормально.

https://codesandbox.io/s/m4oqk57w0p

...