React中点击子元素onClick时如何禁用父元素的onClick事件？

这是DOM事件冒泡机制导致的问题——点击子元素后，事件会沿着DOM树向上传播，触发所有父元素的点击事件。解决方法很直接，在子元素的事件处理逻辑中阻止事件冒泡即可。

方法1：在子元素的onClick回调中直接阻止冒泡 #

修改子元素的点击事件绑定，先调用e.stopPropagation()再执行原有逻辑：

<div
  className="accordion1"
  onClick={(e) => {
    e.stopPropagation(); // 阻止事件向上冒泡到父元素
    handleExpandItem(e);
  }}
>
  <img className="arrowIcon" src={AssetExport.BottomIcon}></img>
</div>

方法2：在handleExpandItem函数内部处理 #

如果希望逻辑更集中，可以直接在事件处理函数里添加阻止冒泡的代码：

const handleExpandItem = (e) => {
  e.stopPropagation(); // 阻止事件冒泡
  // 你的展开/折叠逻辑代码
  // ...
};

原理说明 #

e.stopPropagation()是DOM事件API的方法，它会终止事件在DOM树中的传播，避免触发父元素上绑定的同类型事件。这样点击子元素时，只会执行handleExpandItem，父元素的handleAddComponent不会被触发。

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