如何实现Ant Design表格expandRowByClick仅在行非Toggle区域触发并避免冲突？

核心思路 #

要实现点击Toggle时仅触发自身逻辑、不触发行展开，关键是阻止Toggle的点击事件冒泡到行元素。因为expandRowByClick是监听行的点击事件，只要Toggle的事件不往上冒泡，行的展开逻辑就不会被触发。

具体修改步骤 #

1. 修正Toggle的事件处理函数，添加事件冒泡阻止 #

你的onOmitChange函数需要接收React合成事件对象，并调用event.stopPropagation()来阻止事件向上传播。同时，避免用document.getElementById获取元素状态，直接通过事件对象获取更符合React规范：

onOmitChange = (x, y, event) => {
  // 阻止事件冒泡到行，避免触发expandRowByClick
  event.stopPropagation();
  
  const isChecked = event.target.checked;
  if (isChecked) {
    this.onEnableDisableRowForOptimization(y, "enable");
  } else {
    this.onEnableDisableRowForOptimization(y, "disable");
  }
}

2. 移除checkExpandedRows中错误的event.stopPropagation() #

onExpandedRowsChange的回调参数是选中的展开行key数组，并不包含事件对象，所以之前直接使用event.stopPropagation()是无效的，需要删除这行代码：

checkExpandedRows = (rows) => {
  // 移除错误的event.stopPropagation()
  this.props.checkExpandedRows(rows);
}

3. 确保Toggle的事件绑定传递正确参数 #

你的Toggle输入框的onChange绑定已经正确传递了前置参数，React会自动将事件对象作为最后一个参数传入，所以不需要修改绑定代码，保持原样即可：

<input 
  id={r.activityGroupName} 
  className={styles.inputYo} 
  onChange={me.onOmitChange.bind(me, 'budgetPreference', r)} 
  type="checkbox" 
  checked={!!r.enabled}
/>

为什么之前的方案失败？ #

• 直接判断event.target无效：React合成事件的target在事件冒泡过程中可能指向内部元素（比如label或input），而且你之前没有正确在checkExpandedRows中获取事件对象（因为Ant Design的onExpandedRowsChange不传递事件）。
• ref方案未生效：可能是ref绑定方式错误，但实际上不需要通过ref获取DOM元素，利用React合成事件的stopPropagation()是更简洁的解决方案。

最终效果 #

• 点击行内除Toggle以外的区域时，正常触发checkExpandedRows，展开/折叠行。
• 点击Toggle开关时，仅执行onOmitChange逻辑，不会触发行的展开/折叠。

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