React-table：使用复选框将访问器值保存在状态中

Question

我正在尝试将 react-table 用作复选框 table。第一列将是复选框，当一个复选框被 selected 时，我想保存在状态访问器中定义的 ID。

我一直在查看这些示例，并通过官方文档找到了自己的方法，但到目前为止运气不佳。

到目前为止我的代码：

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 = { personId: null }

     //Data to show inside the table, when an item gets selected the ID has to be set in the state
    this.data= [
      {id: 1, first_name: 'Emma', last_name: 'Smith', email: 'emma@example.com'},
      {id: 2, first_name: 'Liam', last_name: 'Miller', email: 'liam@example.com'}
    ];

    //Header data for the table
    this.columns = [
      {Header: '#', accessor: 'id', Cell: () => <input onChange={() => {
        //Here i want to get the ID of the selected item defined in this.data
        this.setState({personId: this.data.id});
      }} type="checkbox"></input>},
      {Header: 'First name', accessor: 'first_name'},
      {Header: 'Last name', accessor: 'last_name'},
      {Header: 'Email', accessor: 'email'}
    ];

  }

  logger = () => {
    console.log("personId: " + this.state.personId)
  }

  render() {
    return(
      <div className="wrapper">
        <button onClick={this.logger}>Print</button>
        <ReactTable data={this.data} columns={this.columns} />
      </div>
    );
  }
}

我还希望一次只能勾选一个复选框。我看到有人用单选按钮解决这个问题，但是当我将 type="checkbox" 更改为 type="radio" 时，我仍然可以 select 多个项目。

谁能帮我解决这个问题并解释一下在状态中保存访问器值的最佳方法是什么？

提前致谢:)

Answer 1

首先，为什么要使用 react-table 包？使用 3rd 方包而不是自己编写有什么好处？

我要采取的步骤：

用你需要的东西写静态 HTML table
将 data 数组映射到 table 行并填充它。确保添加 data-id 属性并将数组中的 id attribute 传递给每个元素
添加 onClick 处理程序，单击时获得 data-id 属性。
您可以使用计算得到的属性名称（例如 here）并生成这样的状态：this.setState( {[savedId]: value} )

应该就是这样。

React-table：使用复选框将访问器值保存在状态中

React-table: save accessor value in state with checkbox

javascript

json

reactjs

react-table