React中event.stopPropagation()失效问题求助

我来帮你搞定这个问题！核心原因是你在传递事件对象的时候出了问题，导致event.stopPropagation()根本没起作用。咱们一步步来解决：

问题分析 #

你在<SelectorWindow />的取消按钮里写了：

<p onClick={ () => {cancelWindow(event)} }> X </p>

这里的event是未定义的——箭头函数没有接收事件参数，所以传递给cancelSelectorWindow的event是undefined，调用event.stopPropagation()自然不会有任何效果。点击取消按钮时，事件还是会冒泡到父级的<td>，触发loadSelectorWindow，把弹窗的显示状态又改回true。

解决方案 #

1. 正确传递事件对象 #

修改取消按钮的onClick绑定，确保事件对象被正确传递：

// 方案一：直接把函数绑定给onClick，React会自动传递event参数
<p onClick={cancelWindow}> X </p>

// 方案二：在箭头函数里接收event并传递
<p onClick={(event) => cancelWindow(event)}> X </p>

2. 修复State修改的不规范写法（可选但推荐） #

你直接修改了state中数组对象的属性（比如p.variationSelectorActive = true），这违反了React的state不可变原则，可能会导致意外的渲染问题。建议创建新的对象来更新state：

修改loadSelectorWindow函数：

loadSelectorWindow = (product_id) => {
  this.setState({
    products: this.state.products.map(p => {
      if (p.product_id === product_id) {
        // 返回新对象，不修改原state中的对象
        return { ...p, variationSelectorActive: true };
      } else {
        return { ...p, variationSelectorActive: false };
      }
    })
  });
};

修改cancelSelectorWindow函数：

cancelSelectorWindow = (event) => {
  // 现在event是有效的，可以阻止冒泡
  event.stopPropagation();
  this.setState({
    products: this.state.products.map(p => ({
      ...p,
      variationSelectorActive: false
    }))
  });
};

3. 额外防护：阻止弹窗内部所有点击冒泡（可选） #

如果想彻底避免弹窗内的任何点击触发父元素事件，可以给<SelectorWindow />的最外层容器添加onClick事件来阻止冒泡：

// 在SelectorWindow组件内部的根元素上添加
<div onClick={(e) => e.stopPropagation()}>
  {/* 弹窗内容 */}
  <p onClick={cancelWindow}> X </p>
</div>

这样修改后，点击取消按钮时，event.stopPropagation()会生效，阻止事件冒泡到父级<td>，弹窗就能正常关闭啦！

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