React-Table复选框表格：选中时保存Accessor对应ID至状态

我来帮你搞定这个需求！其实核心就是自定义首列的复选框组件，然后通过事件监听来维护选中ID的状态。你用的是react-table v6版本对吧？我给你整理了完整的实现代码，并且把关键步骤拆解清楚：

步骤1：初始化组件状态 #

首先在constructor里初始化存储选中ID的数组，以及表格数据（这里我模拟了一些示例数据，你可以替换成自己的）：

constructor(props) {
  super(props);
  this.state = {
    data: [
      { id: 1, name: "张三", age: 25 },
      { id: 2, name: "李四", age: 30 },
      { id: 3, name: "王五", age: 28 }
    ],
    selectedIds: [] // 用来存储选中的ID
  };
}

步骤2：定义表格列配置 #

首列我们自定义为复选框列，通过Cell属性渲染复选框，并且绑定选中状态和事件：

columns = [
  {
    Header: "", // 首列标题可以留空
    accessor: "checkbox", // 自定义accessor标识
    Cell: ({ row }) => (
      <input
        type="checkbox"
        checked={this.state.selectedIds.includes(row.original.id)}
        onChange={() => this.handleSelectRow(row.original.id)}
      />
    ),
    width: 50 // 给复选框列设置固定宽度
  },
  {
    Header: "姓名",
    accessor: "name"
  },
  {
    Header: "年龄",
    accessor: "age"
  }
];

步骤3：实现选中/取消选中的处理函数 #

这个函数负责根据当前复选框的状态，更新selectedIds数组：

handleSelectRow = (id) => {
  this.setState(prevState => {
    if (prevState.selectedIds.includes(id)) {
      // 如果已选中，就移除该ID
      return {
        selectedIds: prevState.selectedIds.filter(item => item !== id)
      };
    } else {
      // 如果未选中，就添加该ID
      return {
        selectedIds: [...prevState.selectedIds, id]
      };
    }
  });
};

步骤4：渲染ReactTable组件 #

把定义好的columns和data传进去，同时可以在组件里展示当前选中的ID，方便调试：

render() {
  const { data, selectedIds } = this.state;
  return (
    <div>
      <h3>选中的ID：{selectedIds.join(", ")}</h3>
      <ReactTable
        data={data}
        columns={this.columns}
        defaultPageSize={10}
        className="-striped -highlight"
      />
    </div>
  );
}

完整代码整合 #

把上面的部分整合起来，就是完整的组件代码了：

import React from 'react';
import ReactTable from "react-table";
import 'react-table/react-table.css'

export default class TableAccessor extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [
        { id: 1, name: "张三", age: 25 },
        { id: 2, name: "李四", age: 30 },
        { id: 3, name: "王五", age: 28 }
      ],
      selectedIds: []
    };
  }

  columns = [
    {
      Header: "",
      accessor: "checkbox",
      Cell: ({ row }) => (
        <input
          type="checkbox"
          checked={this.state.selectedIds.includes(row.original.id)}
          onChange={() => this.handleSelectRow(row.original.id)}
        />
      ),
      width: 50
    },
    {
      Header: "姓名",
      accessor: "name"
    },
    {
      Header: "年龄",
      accessor: "age"
    }
  ];

  handleSelectRow = (id) => {
    this.setState(prevState => {
      return prevState.selectedIds.includes(id)
        ? { selectedIds: prevState.selectedIds.filter(item => item !== id) }
        : { selectedIds: [...prevState.selectedIds, id] };
    });
  };

  render() {
    const { data, selectedIds } = this.state;
    return (
      <div>
        <div>当前选中的ID：{selectedIds.length > 0 ? selectedIds.join(", ") : "无"}</div>
        <ReactTable
          data={data}
          columns={this.columns}
          defaultPageSize={10}
          className="-striped -highlight"
        />
      </div>
    );
  }
}

关键细节说明 #

• row.original.id：这里的original是react-table里对应原始数据对象的属性，所以你可以直接拿到每条数据里的id（也就是你说的accessor定义的ID）。
• 状态更新用了函数式的setState：因为我们需要基于之前的状态来更新，这样能避免状态更新的异步问题。
• 如果你需要全选功能，可以在表头也加一个复选框，然后实现全选/取消全选的逻辑（遍历所有数据的ID来更新selectedIds）。

这样你就能实现点击复选框时，把对应的ID保存到组件状态里了，测试一下看看选中和取消选中的时候，页面上展示的选中ID是不是正确的~

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