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

Posted 2023-02-22

【中文标题】MUI ClickAwayListener 单击时关闭模式本身（React.Js）

【英文标题】：MUI ClickAwayListener closing the modal itself when clicked (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组件，是我自己构建的样式化组件

【参考方案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 无法检测到它自己的子组件？