Question

我正在尝试将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"时，我仍然可以选择多个项目。

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

提前致谢：）

Answer 1

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

我采取的步骤：

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

那应该是它。

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

1 个答案: