Material UI Data Grid自定义分页按钮点击无响应问题

问题根源 #

你的代码存在三个关键问题导致按钮点击无反应：

• 注释掉了Pagination核心的onChange回调，这是触发Data Grid页码更新的必要逻辑
• 硬写count={2}，没有使用Data Grid实际的分页总数pageCount
• 自定义next/previous组件时，错误处理了点击事件传递逻辑

修正方案 #

直接调整代码如下：

export function CustomPagination() {
  const apiRef = useGridApiContext();
  const page = useGridSelector(apiRef, gridPageSelector);
  const pageCount = useGridSelector(apiRef, gridPageCountSelector);
  const classes = useStyles();

  return (
    <Pagination
      count={pageCount} // 使用Data Grid实际的分页总数
      page={page + 1}
      className={classes.root}
      onChange={(event, value) => apiRef.current.setPage(value - 1)} // 恢复页码变更回调
      renderItem={(item) => (
        <PaginationItem
          components={{
            next: (props) => <Button {...props}>Next</Button>, // 直接传递props，包含原生点击逻辑
            previous: (props) => <Button {...props}>Previous</Button>,
          }}
          {...item}
        />
      )}
    />
  );
}

关键说明 #

1. 恢复onChange回调：点击分页按钮时，该回调会接收最新页码value，通过apiRef.current.setPage(value - 1)将1索引的页码转换为Data Grid需要的0索引格式，完成分页切换。
2. 使用pageCount作为总数：确保分页组件的总页数和Data Grid的实际数据页数保持一致，避免出现无效页码。
3. 正确传递组件props：props中已经包含了Material-UI原生的点击事件、禁用状态等逻辑，直接传递即可保证按钮正常工作（比如第一页时Previous按钮自动禁用）。

内容的提问来源于stack exchange，提问作者Amine