[英]React table - force reset page index in manual pagination
我在手动重置页面索引时遇到问题
我从onPageChange
, onPageSizeChange
...等手动处理数据更改
当我使用onPageChange
更改页面索引时,我存储在高级组件中并再次将 ReactTable 作为称为 currentPage 的道具传递,在相同的情况下,我需要将 currentPage 重置为 0,但剂量有效,因此我添加了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"
/>)
代码沙盒
https://codesandbox.io/s/set-initial-page-number-in-react-table-jthci?file=/App.js
如果您在第 3 页并按“重置页面”,它应该在第一页
我创建了一个小代码沙盒问题来向您展示它正在工作。 检查此链接
https://codesandbox.io/s/set-initial-page-number-in-react-table-mumef
所以,通过阅读react-table
的源码,我看到用于分页的组件叫做ReactTablePagination
该组件具有以下行
{showPageJump ? renderPageJump(this.getPageJumpProperties()) : renderCurrentPage(page)}{' '}
这意味着为了更新页面索引,此属性showPageJump
应设置为false
。
我尝试不设置所有这些属性,但它不起作用。 当我将其设置为 false 时,它起作用了。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.