0

我正在尝试将 react-table 用作复选框表。The first column will be the checkboxes, when a checkbox gets selected i want to save the id that was defined in the accessor in the state.

我一直在看这些例子，并通过官方文档，到目前为止没有太多运气。

到目前为止我的代码：

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"仍然可以选择多个项目。

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

提前致谢 ：）

4

1 回答 1

0

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

我会采取的步骤：

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

应该就是这样。

于 2018-04-24T18:38:58.983 回答