Как скопировать состояние реагирующей таблицы, чтобы использовать значения page и pageSize - PullRequest
Новая
       33

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

1 голос
/ 26 марта 2019

Я использовал 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, чтобы использовать его в теле запроса

1 Ответ

1 голос
/ 26 марта 2019

при условии, что у вас есть 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)

...