使用者介面ClickAwayListener本身点击时会关闭

Question

我有下面的显示侧边栏开关，它显示在Popper中。因此，理想情况下，如果单击其他位置（Popper元素之外），Popper应该消失。如果在Popper元素内单击，则该元素不应随处可见。当我单击“切换”或“显示侧边栏”文本时，该Popper消失了。我用<div>包住了波普尔，但同样没有帮助。

铜https://material-ui.com/api/popper/

切换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

Answer 1

将ClickAwayListener直接移到Fade周围（而不是移到Popper周围）似乎很好。

https://codesandbox.io/s/m4oqk57w0p