React中嵌套在Button内的Select组件如何阻止事件冒泡

你之前在onChange回调里加的阻止传播逻辑完全不起作用，本质是没有匹配到事件的传播顺序：

• 用户点击下拉框时，click事件会第一时间从select节点向上冒泡到外层button，触发button绑定的点击逻辑
• 等用户选完选项、触发onChange回调时，外层button的点击逻辑已经执行完毕，这时候再拦截事件根本赶不上已经完成的冒泡过程
• 另外原生button的HTML规范本身不允许嵌套select、input这类可交互元素，部分浏览器的默认交互逻辑会进一步放大这种冒泡异常

不需要大改现有结构，只需要把事件拦截的位置提前到select节点本身，从事件触发的源头切断冒泡路径：

• 不要等onChange阶段再处理，直接在select触发click时就阻止事件向外层传递
• 适配移动端场景，同时拦截mousedown、touchstart类事件，避免移动端点选下拉框时误触发button逻辑

具体改造代码：

// 通用事件拦截方法
const stopPropagation = (e) => {
  // React合成事件自带的拦截能力足够生效，无需特意取nativeEvent操作
  e.stopPropagation();
  e.stopImmediatePropagation();
};

// 改造后的完整结构
<button onClick={this.handleButtonClick}>
  <select 
    value={this.state.value} 
    onChange={this.onChange}
    // 直接在select层绑定拦截逻辑
    onClick={stopPropagation}
    onMouseDown={stopPropagation}
    onTouchStart={stopPropagation}
  >
    <option key={1} value={1}>One</option>
    <option key={2} value={2}>Two</option>
  </select>
  More Text in button, which click should show alert
</button>

• 点击select展开下拉、选择选项时，所有从select节点发出的事件会在当前层就被拦截，不会冒泡到外层button，自然不会触发弹窗逻辑
• 点击button内除select外的文本区域时，事件可以正常冒泡，会按预期触发button的弹窗逻辑

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