React中checkbox选中行存入数组，取消勾选无法删除对应项如何解决？

你现在的实现有两个核心问题：

• 子组件没有把checkbox的勾选状态传递给父组件，父组件不知道当前操作是勾选还是取消
• 父组件的选中逻辑只做了数组新增操作，没有对应删除的分支判断

第一步：修改子组件代码，传递勾选状态 #

1. 修改checkbox的点击绑定逻辑，获取当前勾选状态一同传入处理函数：

<div className="mg-4"><input type="checkbox" onClick={(e)=>this.onSelected2(x, e.target.checked)}/></div>

2. 修改子组件的onSelected2方法，把状态透传给父组件：

onSelected2=(x, isChecked)=>{
  this.props.onSelect(x, isChecked);
}

第二步：修改父组件的选中处理逻辑，增加删除分支 #

修改onRowSelection2方法，根据传入的勾选状态判断是新增还是删除数据，注意遵循React state不可变原则，不要直接修改原数组：

onRowSelection2=(x, isChecked)=>{
  const {selectedProcessList = []} = this.state;
  let newSelectedList;
  if (isChecked) {
    // 勾选时新增，先判断是否已存在避免重复添加
    const isItemExist = selectedProcessList.some(item => item.id === x.id);
    newSelectedList = isItemExist ? selectedProcessList : [...selectedProcessList, x];
  } else {
    // 取消勾选时过滤掉对应项，用行数据的唯一标识匹配，这里假设唯一标识是id，可替换为你实际的字段
    newSelectedList = selectedProcessList.filter(item => item.id !== x.id);
  }
  this.setState({selectedProcessList: newSelectedList});
}

注意：代码中用于匹配的id是行数据的唯一标识字段，如果你实际业务中每行的唯一键是其他字段（比如processId、key等），替换成对应字段即可。

内容的提问来源于stack exchange，提问作者talent in making