Таблица React - принудительный сброс индекса страницы при ручном разбиении на страницы - PullRequest
Новая
       45

Таблица React - принудительный сброс индекса страницы при ручном разбиении на страницы

0 голосов
/ 05 августа 2020

Я сталкиваюсь с проблемой при сбросе индекса страницы вручную

Я обрабатываю изменения данных вручную из onPageChange, onPageSizeChange ... et c

, когда я меняю индекс страницы с помощью onPageChange Я сохранил в высокоуровневом компоненте и снова передаю ReactTable в качестве свойства с именем currentPage, в тех же случаях мне нужно сбросить currentPage на 0, но dosent работает, поэтому я добавил componentDidUpdate обратный вызов, чтобы принудительно сбросить индекс страницы

ReactTable версия 6.11.5 

componentDidUpdate(prevProps, prevState) {
    const reactTable = this.myRef.current;
    const { currentPage } = this.props;
    if (reactTable && currentPage !== reactTable.state.page) {
      reactTable.state.page = currentPage;
      reactTable.getResolvedState().page = currentPage;
    }
  }

render() {
    const {
      data,
      loading,
      totalNumberOfPages,
      currentPage,
      onPageChange,
      pageSize,
      onPageSizeChange,
      onFilteredChange,
      onSortedChange,
      filtered,
    } = this.props;
 return (<ReactTable
            ref={this.myRef}
            filtered={filtered}
            onFilteredChange={(filtered) => {
              onFilteredChange(filtered);
              this.setState({ filtered });
            }}
            manual
            sorted={tableSorted}
            onSortedChange={(sorted) => onSortedChange(sorted)}
            filterable
            loading={loading && !silentUpdate}
            pages={totalNumberOfPages}
            page={currentPage}
            onPageChange={onPageChange}
            defaultPageSize={pageSize}
            pageSize={pageSize}
            onPageSizeChange={onPageSizeChange}
            loadingText="Loading..."
            data={data}
            columns={columns}
            className="-striped -highlight"
        />)

CodeSandbox

https://codesandbox.io/s/set-initial-page-number-in-react-table-jthci?file= / App. js

, если вы находитесь на странице 3 и нажмите «Сбросить страницу», она должна быть на первой странице

1 Ответ

1 голос
/ 05 августа 2020

Я создал небольшую проблему с codeandbox, чтобы показать вам, что она работает. Проверьте эту ссылку

https://codesandbox.io/s/set-initial-page-number-in-react-table-mumef

Итак, прочитав исходный код react-table, я увидел, что компонент, используемый для разбивки на страницы, называется ReactTablePagination

Этот компонент имеет следующую строку 

{showPageJump ? renderPageJump(this.getPageJumpProperties()) : renderCurrentPage(page)}{' '}

, что означает, что для обновления индекса страницы это свойство showPageJump должно быть установлено на false.

Я попытался вообще не устанавливать это свойство, но оно не сработало. Когда я установил значение false, все заработало.

...