Javascript 如何在使用React钩子时防止事件在嵌套的div中起作用

我有嵌套的div元素。外面应该有要移动和单击的事件。我希望使嵌套元素能够充当按钮，并防止外部事件发生。在示例中，当我们单击红色部分时，两个事件都发生了。单击红色部分时，如何从绿色部分停止事件？stopPropagation（）未执行此操作。我使用的是React，我的结构比示例中更复杂。但为了清楚起见，我想减少

如果有人能帮忙，我会很高兴的

#大圆圈{
显示器：flex；
证明内容：中心；
对齐项目：居中；
宽度：180px；
高度：180像素；
边界半径：50%；
背景颜色：绿色；
}
#小圆{
宽度：40px；
高度：40px；
边界半径：50%；
背景色：红色；
}

document.getElementById（“bigCircle”）.addEventListener（“单击”，myBigCircle）；
document.getElementById（“smallCircle”）.addEventListener（“单击”，mySmallCircle）；
函数myBigCircle（）{
console.log（“Hello”）；}
函数mySmallCircle（）{
console.log（“Bye”）；}

使用

event.stopPropagation（）

防止父触发器。

#大圆圈{
显示器：flex；
证明内容：中心；
对齐项目：居中；
宽度：180px；
高度：180像素；
边界半径：50%；
背景颜色：绿色；
}
#小圆{
宽度：40px；
高度：40px；
边界半径：50%；
背景色：红色；
}

document.getElementById（“bigCircle”）.addEventListener（“单击”，myBigCircle）；
document.getElementById（“smallCircle”）.addEventListener（“单击”，mySmallCircle）；
函数myBigCircle（）{
console.log（“Hello”）；}
函数mySmallCircle（事件）{
event.stopPropagation（）
控制台日志（“再见”）；
}

您正在处理不同的事件，因此为了防止子元素触发父元素，您需要在该事件上添加相同的事件和

stopPropagation（）

：

<div
    id="center"
    style={styleSmallCircle}
    onMouseUp={e => {
      e.stopPropagation();
    }}
    onClick={e => {
      setTest(!test);
      console.log("Bye");
    }}
/>

{
e、 停止传播（）；
}}
onClick={e=>{
setTest（！测试）；
控制台日志（“再见”）；
}}
/>

以下是一个完全有效的示例：

const Test=（）=>{
let[test，setTest]=React.useState（false）；
返回(
{
console.log（“你好”）；
}}
>
{
e、 停止传播（）；
}}
onClick={e=>{
控制台日志（“再见”）；
}}
/>
);
};
常量styleBigCircle={
显示：“flex”，
辩护内容：“中心”，
对齐项目：“中心”，
宽度：“180px”，
高度：“180像素”，
边界半径：“50%”，
背景颜色：“绿色”
};
常量styleSmallCircle={
宽度：“40px”，
高度：“40px”，
边界半径：“50%”，
背景颜色：“红色”
};
const rootElement=document.getElementById（“根”）；
render（，rootElement）

stopPropagation（）没有完成它应该做的工作。请将代码张贴在您尝试使用它的地方