React中如何实现仅点击Backdrop遮罩层时关闭模态框？

这是因为React的事件冒泡机制，点击子组件ModalContainer时，事件会向上冒泡到父组件Backdrop，从而触发关闭函数。可以通过以下两种方法解决：

方法一：阻止子组件的事件冒泡 #

在ModalContainer上添加onClick事件，调用e.stopPropagation()阻止事件向上传递：

const Backdrop = styled.div`
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top:0;
left: 0;
background-color: rgba(0,0,0,0.7);
width: 100vw;
height: 100vh;
`

const ModalContainer = styled.div`
position: relative;
width: 700px;
height: 600px;
background-color: lightcoral;
`;

const [modalbool, setModalbool] = useState(false);

const modalClosefunc = () => {
  setModalbool(false);
};

{modalbool ? (
  <Backdrop onClick={modalClosefunc}>
    <ModalContainer onClick={(e) => e.stopPropagation()}>
      {/* 模态框内容 */}
    </ModalContainer>
  </Backdrop>
) : null}

方法二：在父组件点击事件中判断触发元素 #

修改Backdrop的点击事件，只有当点击的元素是Backdrop本身时，才执行关闭逻辑：

const Backdrop = styled.div`
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top:0;
left: 0;
background-color: rgba(0,0,0,0.7);
width: 100vw;
height: 100vh;
`

const ModalContainer = styled.div`
position: relative;
width: 700px;
height: 600px;
background-color: lightcoral;
`;

const [modalbool, setModalbool] = useState(false);

{modalbool ? (
  <Backdrop onClick={(e) => {
    // 只有点击Backdrop本身时才关闭
    if (e.target === e.currentTarget) {
      setModalbool(false);
    }
  }}>
    <ModalContainer>
      {/* 模态框内容 */}
    </ModalContainer>
  </Backdrop>
) : null}

两种方法都能实现仅点击遮罩层（Backdrop）时关闭模态框的需求，可根据实际场景选择。

内容的提问来源于stack exchange，提问作者user19476497