在反应中关闭模态窗口

Question

我正在做一个应用程序，我有一个模态窗口，当我点击黑色背景时我想关闭模态窗口，我这样做的方式是，问题是我有白色容器在模态窗口的中心，我需要点击那里的东西，当我这样做时，它会关闭整个窗口，即使 onClick 事件位于具有黑色背景的容器 ModalHero 上。

让我给你看代码...

import React from "react";
import { ModalHero, ContainSettings } from "./ModalSettingsStyled";

const Modal = ({ setProfile }) => {
  return (
    <ModalHero onClick={() => setProfile(false)}>
      <ContainSettings></ContainSettings>
    </ModalHero>
  );
};

export default Modal;

当我点击 ContainSettings 时，它会关闭窗口，但我不希望这种情况发生。

让我向您展示 css（我正在使用样式组件）

import styles from "styled-components";

export const ModalHero = styles.section`

width: 100%;
height: 100vh;

background: rgba(0,0,0, .5);

position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;

display: flex;
align-items: center;
justify-content: center;


`;

export const ContainSettings = styles.div`

width: 45%;
height: 40vh;

border-radius: .5rem;
background: white;

`;

这是它的样子

当我点击黑色背景时它会关闭窗口，但当我点击白色容器时它不会

感谢您的时间！

Answer 1

您可以将 Event.stopPropagation() onClick={(e) => e.stopPropagation()} 放在您的 ContainSettings

<ContainSettings onClick={(e) => e.stopPropagation()}>

这是一个活生生的例子：

https://codesandbox.io/s/so-67143988-jmc0k?file=/src/Modal.js