使用 Redux/React 的 Material UI TablePagination 句柄

Posted 2023-02-22

【中文标题】使用 Redux/React 的 Material UI TablePagination 句柄

【英文标题】：Material UI TablePagination handle with Redux/React

【发布时间】：2018-09-26 10:25:02

【问题描述】：

我正在尝试管理 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 功能来区分前进或返回上一页？

【参考方案1】：

您好，这是我的解决方案 :)

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

【参考方案2】：

TablePagination 有page 参数，所以在redux 或组件中通过引入额外的参数currentPage 来跟踪current page，它将始终指向当前呈现的页面。这样您就可以使用它通过简单地比较 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 );
 ;
...

【讨论】：

亚历克斯，我认为你没有抓住重点。我想知道如何根据单击的箭头创建一个函数，添加或减去页面，如下所示：handleChangePage = (eventArrowClicked)) => if(eventArrowClicked == Next) this.props.dispatch(nextPage(this.props.page)) else this.props.dispatch(previousPage(this.props.page))

考虑使用 pagination-action material-ui-next.com/demos/tables/… 以便您可以访问按钮点击事件。

是的，但是如何将它应用到 Redux

而不是在 TablePaginationActions 中触发事件 this.props.onChangePage(event, page) 将其分派到存储，因此将触发 reducer 并更改表组件状态。每一次组件状态变化都会触发组件渲染方法。

Alex 我无法通过新的按钮处理程序进行调度，它给了我一个“this.props.dispatch is not a function”错误。