带有 Redux/React 的 Material UI TablePagination 句柄

Question

我正在尝试管理 MaterialUI 表格页面的状态。我目前正在使用 onChangePage 属性，但这使我只能通过“添加”页面进行导航，即仅在一个方向上导航，因此我无法返回到之前的页面。我的问题是如何根据您单击的按钮选择什么样的事件，因为如果您单击两个页面按钮中的任何一个，它只会前进到下一页。

这是表格分页部分：

<TablePagination
   component="div"
   count= {this.props.logs.length}
   rowsPerPage={this.props.rowsPerPage}
   page={this.props.page}
   backIconButtonProps={{
     'aria-label': 'Previous Page',
   }}
   nextIconButtonProps={{
     'aria-label': 'Next Page',
   }}
   onChangePage={this.handleChangePage}
/>

我的 handleChangePage 看起来像这样：

handleChangePage = (event) => {
  this.props.dispatch(nextPage(this.props.page))
}

那么，如何使用 MaterialUI Tables 的 onChangePage 功能区分前进或返回上一页？

Answer 1

嗨，这是我的解决方案:)

 <TablePagination
   ...
   backIconButtonProps={{
     'aria-label': 'Previous Page',
     'onClick': this.loadPreviousPage,
   }}
   nextIconButtonProps={{
      'aria-label': 'Next Page',
      'onClick': this.loadNextPage,
  }}
  ...
  />