React中如何维护Table表格每行单选按钮的选中状态

问题核心原因 #

你的实现没有遵循React受控组件的设计逻辑：直接修改DOM元素的checked属性不会被React状态同步，组件重渲染时会被重置；同时没有为每行的输入框绑定对应状态，也没有区分不同行的状态值，所以修改不会生效。

解决步骤 #

1. 初始化行状态

在组件constructor中提前存储每行开关的选中状态，用行id作为key区分不同行：

constructor(props) {
  super(props);
  const initSwitchStatus = {};
  // 用接口返回的初始status初始化每行开关状态
  props.records.forEach(row => {
    initSwitchStatus[row.id] = row.status;
  });
  this.state = {
    switchStatus: initSwitchStatus,
    records: props.records
  };
}

如果你的records是异步加载的，在接口请求成功的回调里再执行一次初始化switchStatus的逻辑即可。

2. 重写状态变更处理函数

不需要手动操作DOM，直接更新React状态即可：

changeStatus(rowId, e) {
  this.setState(prevState => ({
    switchStatus: {
      ...prevState.switchStatus,
      // 直接取触发事件的checkbox选中状态更新对应行的状态
      [rowId]: e.target.checked
    }
  }), () => {
    // 状态更新完成后的回调，可选用来打印日志或者提交后台
    console.log(`行${rowId}选中状态：`, this.state.switchStatus[rowId]);
  });
}

3. 给输入框绑定状态

修改render中的input标签，关联每行的状态值，同时触发变更时传入当前行id：

{records.length>0 && records.map((row,i) => (
  <tr key={i}>
    <td>{i+1}</td>
    <td>{row.name}</td>
    <td>          
        <div className="form-check form-switch">
        <input 
          className="form-check-input" 
          type="checkbox"
          {/* 绑定state中对应行的选中状态 */}
          checked={this.state.switchStatus[row.id]}
          {/* 绑定事件时传入当前行id区分不同行 */}
          onChange={this.changeStatus.bind(this, row.id)}
        />
        </div>
    </td>
    <td>
    <Link to={"/brand/"+row.slug}>
    <button type="button" className="btn btn-sm btn-info active"> <i className="fas fa-edit"></i > Edit</button>
    </Link>
    </td>
  </tr>
))}

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