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

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，你可以将它作为你父组件状态的一部分，然后使用pageSize prop为react-table提供页面大小。

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