React-table:使用复选框保存状态的访问者值

时间:2018-04-24 18:22:23

标签: javascript json reactjs react-table

我正在尝试将react-table用作复选框表。第一列将是复选框,当选中一个复选框时,我想保存在状态中访问者中定义的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"时,我仍然可以选择多个项目。

谁能帮助我克服这个问题,并解释一下在州内保存访问者价值的最佳方法是什么?

提前致谢:)

1 个答案:

答案 0 :(得分:0)

首先,为什么要使用react-table包裹?使用第三方软件包而不是自己编写软件有什么好处?

我采取的步骤:

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