React自定义表格分页场景下复选框选中状态异常问题求助

问题核心原因 #

你的代码存在两处逻辑错误，直接导致了分页同位置复选框同步选中的问题：

1. 状态更新逻辑错误：handleCheckboxCheck 中执行setState时，错误地将selected状态从存储所有选中项的对象，覆盖成了当前点击复选框对应的单个布尔值。导致后续所有复选框的选中判断都共享同一个全局布尔值，只要值为true，所有位置的复选框都会被选中。
2. 复选框选中状态判断错误：input的checked属性直接判断this.state.selected（全局布尔值），没有和当前复选框的唯一标识绑定，导致所有复选框的选中状态完全同步。
3. 额外隐藏问题：分页渲染的表格行如果没有绑定唯一key，React虚拟DOM diff时会复用同位置的节点，也会触发同位置复选框状态同步的异常。

修复方案 #

1. 修正复选框选中事件逻辑 #

handleCheckboxCheck(e) {
  const newSelected = Object.assign({}, this.state.selected);
  newSelected[e.target.value] = !this.state.selected[e.target.value]
  // 传入完整的选中对象更新状态，不要只传单个布尔值
  this.setState({
    selected: newSelected
  })
}

2. 修正复选框渲染逻辑 #

<td>
  <input
    type="checkbox"
    id={id}
    // 绑定当前value对应的选中状态，不要直接判断selected本身
    checked={!!this.state.selected[value]}
    value={value}
    onChange={(e) => this.handleCheckboxCheck(e)}
    // 补充唯一key，避免分页时节点复用异常
    key={id}
  />
</td>

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