仅当我们在模态内容之外单击时才关闭覆盖

【问题标题】：Close the overlay only if we click outside the modal content仅当我们在模态内容之外单击时才关闭覆盖
【发布时间】：2020-12-28 00:28:25
【问题描述】：

我有一个使用样式组件创建的模式。它用覆盖层包裹。当我单击覆盖时，模态会自行关闭，但是当我单击模态的内容时，它也会关闭。我们的想法是仅当我们超出（框/内容）时才关闭覆盖。我相信它与CSS有关。我们该如何解决这个问题？

为了能够重现问题，我创建了一个沙箱：https://codesandbox.io/s/zen-cache-q5w0n

【问题讨论】：

标签： css reactjs styled-components

【解决方案1】：

您可以在ModalBody 组件上定义onClick 并使用event.stopPropagation。

stopPropagation 根据mdn:

Event 接口的 stopPropagation() 方法可防止当前事件在捕获和冒泡阶段进一步传播。

Modal 组件的调整版本：

export const Modal: React.FC<ModalProps> = (props) => {
  return (
    <div>
      {props.isOpened && (
        <Overlay hide={props.hideModal}>
          <ModalContainer>
            <ModalPosition>
              <div className={"w-100"}>
                <ModalBody onClick={e => e.stopPropagation()}>{props.children}</ModalBody>
              </div>
            </ModalPosition>
          </ModalContainer>
        </Overlay>
      )}
    </div>
  );
};

【讨论】：

它有效，谢谢！我会将其标记为解决方案并投票。我将等待其他解决方案（出于好奇）。圣诞快乐，新年快乐！