Question

我是React的新手。我使用react-table来显示我拥有的数据。现在，我需要从表中获取一些特定的数据，并将其设置为一种状态，例如我最后一行的名称。我该怎么办？我想要分页时的最后一行数据，即所有页面中的数据。我的桌子就像下面的

<ReactTable
  columns={columns}
  data={this.state.users}
  defaultPageSize={3}
  className="-striped -highlight"
  sortable={false}
  resizable={false}
  style={{
    textAlign: "center"
  }}
/>

Answer 1

您可以尝试从this.state.users数组中提取它。根据您的页面大小，您可以运行类似

的过滤器

lastRows = this.state.users.filter((user, index) => ((index-1) % page_size) === 0)

以page_size作为页面中的数字或行。您似乎已将其设置为3。

PS：：如果要访问当前的page_size，可以使其成为父组件状态的一部分，然后使用{{1} }。

Answer 2

您可以在创建反应表时使用getTdProps或getTrProps与预先指定的命令进行交互

<ReactTable
  columns={columns}
  data={this.state.users}
  defaultPageSize={3}
  className="-striped -highlight"
  sortable={false}
  resizable={false}
  style={{
    textAlign: "center"
  }}
  getTdProps={(state, rowInfo, column, instance) => {
      // rowInfo contains a lot of information about the row (including index on both the
      // page and it's index within the data set), the rowInfo.original objet contains 
      // values in the cells of the row clicked.
      return {
        // You can define an onClick function here that will apply to all rows
        onClick: (e, handleOriginal) => {
           const rowData = rowInfo.original
           // You can interact with the row data here, to use it however you want
           this.setState({userName: rowData.userName, userEmail: rowData.userEmail})
        }
  }};
/>

此功能专门将userName和userEmail设置为您的状态（假设这些是您在表中具有的值）

Here's a great sandbox set up to play with this feature和react-table docs are here

React-Table获取特定行的数据并设置为状态

2 个答案: