使用selectionProps勾选复选框时OnSelectionChange未触发求助

核心原因 #

通过程序（比如状态赋值、DOM操作）设置复选框选中属于非用户交互的程序式变更，浏览器/UI框架默认不会触发onChange/OnSelectionChange这类用户交互事件，只有手动点击复选框才会触发。而你用普通checked属性时正常，是因为那是用户操作触发事件后同步状态的流程。

具体解决方法 #

• 手动调用回调函数
  在通过条件设置选中状态的代码后，直接调用OnSelectionChange方法，并传入符合预期的参数。以React为例：

  const [checked, setChecked] = useState(false);
  
  // 条件设置选中的逻辑
  const setCheckedByCondition = () => {
    const newChecked = true; // 根据你的条件计算
    setChecked(newChecked);
    // 手动触发回调
    handleSelectionChange({ target: { checked: newChecked } });
  };
  
  const handleSelectionChange = (e) => {
    console.log('选中状态变更:', e.target.checked);
    setChecked(e.target.checked);
  };
  
  return <input type="checkbox" checked={checked} onChange={handleSelectionChange} />;
  

• 模拟触发DOM事件
  如果是直接操作DOM元素设置选中，手动触发change事件来触发绑定的回调：

  const checkboxEl = document.getElementById('target-checkbox');
  // 设置选中状态
  checkboxEl.checked = true;
  // 模拟用户触发change事件
  checkboxEl.dispatchEvent(new Event('change'));
  

• 适配UI组件库的特殊处理
  若使用Ant Design、Element UI等组件库的Checkbox组件，它们的回调仅响应用户操作，程序式修改checked属性不会触发事件。此时可以：

  • 组件采用受控模式，修改状态时同步调用回调
  • 通过组件的Ref获取实例，调用内置的触发方法（比如AntD可通过ref.current.trigger('change')）

• 统一受控组件逻辑
  确保复选框是受控组件：checked属性绑定状态变量，onChange/OnSelectionChange负责更新状态。避免混用受控与非受控模式（比如同时用checked和defaultChecked），这类混用容易导致事件触发异常。

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