antd Checkbox内嵌Select时点击选项触发Checkbox onClick问题求解

问题原因 #

事件冒泡导致冲突：点击Checkbox内部渲染的Select组件（包括输入框区域、下拉选项）时，点击事件会向上冒泡到父级Checkbox元素，触发Checkbox的onClick回调，将selectedCheckbox状态改为false，Select组件直接被卸载，自然无法触发onSelect回调。

修复方案 #

方案1：阻止Select点击事件冒泡（推荐，改动最小） #

给Select组件添加onClick事件阻止向上冒泡，代码修改如下：

<Checkbox
  key={identifier}
  onClick={(e: any) => {
    setSelectedCheckbox(e.target.checked);
    console.log('test=1', e);
  }}
  name={label}
  disabled={viewAssignment}>
  {selectedCheckbox && (
    <Select
      disabled={viewAssignment}
      key={identifier2}
      onSelect={(e: any) => console.log('test=2', e)}
      defaultValue={inputValue}
      // 新增：阻止Select本身的点击事件冒泡到Checkbox
      onClick={(e) => e.stopPropagation()}
      // 可选优化：下拉面板渲染到body下，避免下拉内部点击冒泡
      getPopupContainer={(trigger) => document.body}
      notFoundContent={
        <CustomizeRenderEmpty message={t('NOT_FOUND')} />
      }>
      <Select.Option key={'data'} name={'data'} value={'data'}>
        {'data'}
      </Select.Option>
    </Select>
  )}
</Checkbox>

方案2：DOM结构分层（适合复杂交互场景） #

调整DOM结构，将Checkbox和Select设置为平级节点，通过CSS绝对定位把Select放在Checkbox的视觉范围内，两者无父子嵌套关系，从根源避免事件冒泡冲突。

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