Javascript 在react中关闭模式窗口

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

让我给你看看代码

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

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

export default Modal;

这就是它的样子

当我单击黑色背景时，它将关闭窗口，但当我单击白色容器时，它不会关闭窗口，我该怎么办

---

谢谢你的时间

您可以将Event.stopPropagation（）

onClick={（e）=>e.stopPropagation（）}

放在

ContainSettings

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

e.stopPropagation（）}>

这里有一个活生生的例子：

---

不要将

ContainSettings

渲染为背景组件

ModalHero

的子组件，源自

ContainSettings

的单击事件正在传播到

ModalHero

。这很有意义，感谢您的回答！

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