React多个checkbox选中状态处理及选中值新增删除实现问题

问题原因 #

你当前的代码核心问题是把存储所有可选选项的原始数组和存储选中结果的状态数组混用了，导致取值、判断逻辑全部出错。

具体修改方案 #

1. 拆分基础数据和状态 #

原始选项数组是固定的静态配置，不需要存入state（如果是后端接口返回再存入state即可），单独声明一个状态数组存储选中的value值：

// 固定的可选选项配置
const optionList = [
  {label: 'label1', value: 'value1'},
  {label: 'label2', value: 'value2'},
  {label: 'label3', value: 'value3'}
]
// 存储选中值的状态数组
const [selectedArr, setSelectedArr] = useState([])

注意：你原始代码里把label字段拼写成了lable，注意统一拼写避免属性读取错误。

2. 修改选中触发逻辑 #

handleChange只操作选中状态数组：

function handleChange(item) {
  const temp = [...selectedArr];
  if (temp.includes(item.value)) {
    // 已选中时移除对应值
    temp = temp.filter(val => val !== item.value);
  } else {
    // 未选中时新增对应值
    temp.push(item.value);
  }
  setSelectedArr(temp);
}

3. 绑定checked属性 #

直接判断当前项的value是否在选中状态数组里即可：

{optionList.map((item, index) => {
  return (
    <div key={index}>
      <label className="check-wrap">
        <input
          className="check-field"
          checked={selectedArr.includes(item.value)}
          name={item.label}
          onChange={() => handleChange(item)}
          type="checkbox"
        />
        <span className="check-label">{item.value}</span>
      </label>
    </div>
  )
})}

可选优化 #

如果需要简化选中逻辑，可以用Set实现：

function handleChange(item) {
  const selectedSet = new Set(selectedArr);
  selectedSet.has(item.value) ? selectedSet.delete(item.value) : selectedSet.add(item.value);
  setSelectedArr([...selectedSet]);
}

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