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

【问题标题】：React-Table getting data of a specific row and Set in to the stateReact-Table 获取特定行的数据并设置为状态
【发布时间】：2019-02-12 06:02:23
【问题描述】：

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

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

【问题讨论】：

标签： reactjs react-table

【解决方案1】：

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

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

给定page_size 作为页面中的行数。您似乎已将其设置为 3。

PS：如果您想访问当前的page_size，您可以将其作为父组件状态的一部分，然后使用pageSize 属性为 react-table 提供页面大小。

【讨论】：

【解决方案2】：

您可以在制作 react-table 时使用 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

【讨论】：