React Hooks中多复选框组的单个复选框取消选中问题

核心问题 #

1. 状态管理逻辑错误：你用单个布尔值checked维护多组复选框的状态，无法区分不同复选框的独立状态，导致所有复选框状态同步变化，无法单独控制。
2. 组件回调参数误解：如果使用的是Ant Design的Checkbox组件，它的onChange回调第一个参数是选中状态的布尔值，而非原生DOM事件对象，因此你无法通过e.target.checked获取选中状态。

修正代码 #

1. 调整状态定义

用数组维护所有选中的复选框值（假设你原本的checkboxvalues就是这个数组状态）：

const [checkboxvalues, setCheckboxvalues] = useState([]);

2. 修改Checkbox组件的onChange绑定

直接传递选中状态和当前项的值：

<Checkbox
  size="small"
  name={item}
  value={item}
  checked={checkboxvalues.includes(item)}
  onChange={(checked) => handleOnChange(checked, item)}
/>

3. 重写handleOnChange处理函数

根据选中状态更新选中项数组：

const handleOnChange = (checked, item) => {
  if (checked) {
    // 选中时，将当前项加入数组（避免重复）
    setCheckboxvalues(prev => [...new Set([...prev, item])]);
  } else {
    // 取消选中时，从数组中移除当前项
    setCheckboxvalues(prev => prev.filter(val => val !== item));
  }
};

补充说明 #

• 用数组维护选中项是多复选场景的标准实现方式，每个复选框通过includes(item)判断自身是否被选中，实现独立控制。
• 若你使用的是原生HTML的<input type="checkbox">，onChange参数是原生事件，此时e.target.checked有效，但你的代码更符合Ant Design组件的使用场景，需注意组件库的回调参数规范。

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