使用 ClickAwayListener 关闭 popper MUI 会影响内部的所有内容答案

【问题标题】：Closing a popper MUI using ClickAwayListener affects everything inside使用 ClickAwayListener 关闭 popper MUI 会影响内部的所有内容
【发布时间】：2021-12-12 21:55:34
【问题描述】：

我是新的 react 开发人员，在这里我有一个小问题，我的 ClickAwayListener 在单击“x”或外部时应该关闭 Popper，但问题是我的 Paper 中有一个组件Select 当我点击那个选择来查看我的选项然后选项出现并快速消失，我已经测试并且ClickAwayListener 也会影响这个，如何禁用ClickAwayListener 对Paper 内部的影响？

import ClickAwayListener from "@material-ui/core/ClickAwayListener";

 const renderSettingsPopper = () => {
    return (
      <Popper
        id={"graph"}
        open={popupOpenState()}
        placement="left-start"
        anchorEl={anchorEl}
        className={props.classes.components}
        style={{ zIndex: 4 }}
        modifiers={{
          flip: {
            enabled: true,
          },
          preventOverflow: {
            enabled: true,
            boundariesElement: "viewport",
          },
        }}
      >
        <ClickAwayListener onClickAway={closeSettingsPopup}>
          <Paper className={props.classes.components}>
            {renderSettingsForm()}
          </Paper>
        </ClickAwayListener>
      </Popper>
    );
  };

【问题讨论】：

任何帮助表示赞赏
我的回答对你有用吗？

标签： javascript html reactjs function material-ui

【解决方案1】：

这个问题比我预想的要难，但我终于找到了解决办法。您需要在Popover 中跟踪Select 的打开状态。

<Select
  label="Age"
  defaultValue={10}
  onOpen={() => setSelectOpen(true)}
  MenuProps={{
    TransitionProps: {
      onExited: () => setSelectOpen(false),
    },
  }}
>
  <MenuItem value={10}>Ten</MenuItem>
  <MenuItem value={20}>Twenty</MenuItem>
  <MenuItem value={30}>Thirty</MenuItem>
</Select>

当 Select 之一当前打开时禁用关闭处理程序：

<ClickAwayListener
  onClickAway={() => {
    if (selectOpen) return;
    handleClose();
  }}
>

【讨论】：