Как скопировать состояние таблицы реакции, чтобы использовать значение page и pageSize

Я использовал https://www.npmjs.com/package/react-table lib. . необходимо получить данные для таблицы с помощью фильтров столбца. фильтр ниже:

      ...
      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)...

Итак, как следует синхронизировать значение page и pageSize из компонента ReactTable, чтобы использовать его в теле запроса


reactjs javascript pagination server-side react-table
person kuka    schedule 26.03.2019    source источник

Ответы (1)


arrow_upward
3
arrow_downward

предполагая, что у вас есть pageSize и page в исходном состоянии компонента, вы можете использовать некоторые из встроенных свойств ReactTable для обработки изменений размера страницы и изменений страницы:

<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 вручную (просто устанавливая для них значение состояния, как показано выше).

Также показано выше, вы можете дать ему список параметров размера страницы, которые вы хотите включить, и иметь размер страницы по умолчанию, инициализировав переменную вашего состояния pageSize значением (например, 25).

person Richard Stoeffel    schedule 26.03.2019
comment
что должно быть в this.state.checkPageSize? - person kuka; 26.03.2019
comment
Извините, что плохо, это должно быть просто pageSize, я обновил свой ответ - person Richard Stoeffel; 27.03.2019