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, }} ... />

Answer 2

TablePagination具有page参数，因此通过引入额外的参数current page来跟踪redux或组件中的currentPage，该参数将始终指向当前呈现的页面。这样，只需比较page和currentPage参数，您就可以使用它来识别用户在分页器中导航的方向。

...
constructor(props, context) {
 super(props, context);

 this.state = {
   data: [
     createData('Cupcake', 305, 3.7),
     createData('Donut', 452, 25.0),
     createData('Eclair', 262, 16.0),
     createData('Frozen yoghurt', 159, 6.0),
     createData('Gingerbread', 356, 16.0),
     createData('Honeycomb', 408, 3.2),
     createData('Ice cream sandwich', 237, 9.0),
     createData('Jelly Bean', 375, 0.0),
     createData('KitKat', 518, 26.0),
     createData('Lollipop', 392, 0.2),
     createData('Marshmallow', 318, 0),
     createData('Nougat', 360, 19.0),
     createData('Oreo', 437, 18.0),
   ],
   page: 0,
   rowsPerPage: 5,
   currentPage: 0,
    };
  }

  handleChangePage = (event, page) => {
   const { currentPage } = this.state;
   //compare page and currentPage params here to solve your problem

   this.setState({ page: page, currentPage: page });
 };
...

具有Redux / React的Material UI TablePagination句柄

2 个答案: