如何复制 react-table 的状态以使用 page 和 pageSize 的值

Question

我使用了 https://www.npmjs.com/package/react-table 库。必须通过列的过滤器获取 table 的数据。过滤器如下：

      ...
      filterable: true,
      Filter: () => {
        return (
          <input
            ...
            onChange={e => this.handleSearchInput(e)}
          />
        );
      }

handleSearchInput 方法调用请求到服务器

    let params = {
      filter_fields: this.state.filter, 
      page_size: this.state.pageSize, //here should be state of a table 
      page: this.state.page  // e.g. **state.page** and state - should be arguments
    };
    Actions.getMUsers(params)...

那么应该如何从 ReactTable 组件同步 page 和 pageSize 值以在请求正文中使用它

Answer 1

假设你的初始组件状态有 pageSize 和 page，你可以使用 ReactTable 的一些内置 props 来处理页面大小变化和页面变化：

<ReactTable
    pageSizeOptions={this.state.pageSizeOptions} //Don't need this if you don't want it
    defaultPageSize={this.state.pageSize} // probably smart to have if you're using this as part of a query but not neccessary
    pageSize={this.state.pageSize}
    page={this.state.page}
    onPageChange={page => this.setState({page: page})
    onPageSizeChange={(pageSize, page) => {
      this.setState({ pageSize: pageSize, page: page });
    }}
    ...otherProps
/>

需要记住的一些重要事项是，如果您正在更新 onPageChange 和 onPageSizeChange 函数，您必须还手动处理 page 和 pageSize 道具（只需将它们设置为状态值，如上所示）

如上所示，您可以为其提供您想要包含的页面大小选项的列表，并通过使用一个值（如 25)

如何复制 react-table 的状态以使用 page 和 pageSize 的值

How copy state of react-table to use value of page and pageSize

javascript

reactjs

pagination

server-side

react-table