MUI ClickAwayListener 单击时关闭模式本身（React.Js）答案

【问题标题】：MUI ClickAwayListener closing the modal itself when clicked (React.Js)MUI ClickAwayListener 单击时关闭模式本身（React.Js）
【发布时间】：2021-12-06 06:58:19
【问题描述】：

模态所需的功能是，当单击“更多”按钮时，它应该是可见的，并且当单击更多按钮或屏幕的任何其他部分（不包括模态本身）时，模态应该关闭.从https://usehooks-typescript.com/react-hook/use-on-click-outside和MUI的ClickAwayListener开始，我尝试了各种方法。

<ClickAwayListener
  onClickAway={handleClickAway}
>
  <div style={{ position: 'relative' }}>
    <button
      onClick={(e: any) => {
        e.stopPropagation();
        setModalVisible(!modalVisible);
      }}
    >
      More
    </button>
    <Modal
      visible={modalVisible}
      id="btn-container"
    >
        {dummy.map((str: string) => {
          return <span>{str}</span>;
        })}
    </Modal>
  </div>
</ClickAwayListener>

const handleClickAway = (e: any) => {
    if (e.target.localName === 'body') {
      e.preventDefault();
      return;
    }

    setModalVisible(false);
  };

const Modal = styled.div`
  position: absolute;
  top: 30px;
  left: -200px;
  background: #fff;
  padding: 25px;
  z-index: 8;
  visibility: ${({ visible }) => (visible ? 'visible' : 'hidden')};
  box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2);
  width: 250px;
  max-height: 320px;
  overflow-y: auto;
`;

基本上，ClickAwayListener 无法检测到它的子组件，并且即使我在不应该是功能的模式内部单击时也会关闭模式。

这里使用的'Modal'组件不是materialui组件，是我自己构建的样式化组件

【问题讨论】：

标签： javascript reactjs typescript material-ui frontend

【解决方案1】：

在Modal 中使用onBackdropClick 而不是onClickAway，当您在Modal 之外单击时会触发onBackdropClick

<Modal onBackdropClick={() => setOpen(false)}

在Modal 中使用onClose 而不是onBackdropClick，onClose 在Modal 想要自行关闭时触发

<Modal onClose={(_, reason) => reason === 'backdropClick' && setOpen(false)}

使用Dialog 而不是Modal。 Dialog 是包含 Modal 的组件，具有良好的开箱即用默认样式，而 Modal 是用于低级自定义的丑陋表亲。

<Dialog onClose={(_, reason) => reason === 'backdropClick' && setOpen(false)}

【讨论】：

很抱歉造成混淆，但 Modal 不是一个材质 ui 组件，它是我自己构建的一个非常基本的样式组件。你能相应地更新你的答案吗？
@HardikAswal 为什么不使用 MUI 组件？我会更新我的答案。
@HardikAswal 另外请将您的模态定义代码放入您的问题中。
我已经分享了模态代码。出于多种原因，我不想使用 mui 对话框，而宁愿坚持使用我自己构建的这种模式。
我唯一的问题是，为什么 ClickAwayListener 无法检测到它自己的子组件？