MUI 表分页：如何转到上一页？答案

【问题标题】：MUI Table Pagination: How does going to previous page work?MUI 表分页：如何转到上一页？
【发布时间】：2021-08-20 17:40:56
【问题描述】：

我指的是来自 MUI 的website:https://codesandbox.io/s/3sjxh?file=/demo.js:8248-8255的这个例子

我不明白onPageChange 是如何同时导航到previous 和next 页面的。

      <TablePagination
          rowsPerPageOptions={[5, 10, 25]}
          component="div"
          count={rows.length}
          rowsPerPage={rowsPerPage}
          page={page}
          onPageChange={handleChangePage}
          onRowsPerPageChange={handleChangeRowsPerPage}
        />

handleChangePage 所做的只是设置新的page 值，但它如何知道是减少还是增加count？

const handleChangePage = (event, newPage) => {
    setPage(newPage);
  };

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

但是它怎么知道是减少还是增加呢？

什么“计数”？这个你可能想多了。记录总数不变。事件处理程序提供的唯一内容是用户单击的页码。

您向组件提供关键信息：

count={rows.length}
rowsPerPage={rowsPerPage}
page={page}

总行数、任何给定页面上有多少行以及当前页面。根据这些信息，组件可以在内部计算（并显示为用于导航的 UI 元素）总共存在多少页面以及当前页面之前/之后的页面。

因此，如果当前页面是3，并且有足够的记录来填充 6 个页面，那么组件可以轻松确定显示第 1、2、4、5 和 6 页的链接。

当用户单击该链接时，组件会调用此onPageChange 事件并为您提供用户选择的页面。该页面在页面序列中是较早还是较晚都没有关系。如果用户单击第 2 页，您将获得值 2。如果用户单击第 6 页，您将获得值 6。（或者如果它是零索引的，可能是 1 和 5？）

如果组件呈现带有文本“Prev”或“Next”的链接，那么它仍然只是指向数字页面的链接。链接的文本无关紧要。

【讨论】：