MUI TablePagination的onRowsPerPageChange不生效及类型错误问题

问题概述 #

使用@material-ui/core@4.11.2实现的表格分页，翻页按钮正常工作，但每页行数下拉选择始终固定为5行，同时VS Code触发类型错误，控制台提示Unknown event handler property 'onRowsPerPageChange'。

错误原因 #

1. 属性名称错误：MUI 4.x版本的TablePagination组件中，处理每页行数变化的回调属性是onChangeRowsPerPage，而非代码中使用的onRowsPerPageChange。
2. 状态绑定缺失：rowsPerPage属性写死为固定值5，未绑定状态变量，导致选择新行数后无法更新显示。
3. 事件类型不匹配：原回调函数的事件类型定义不符合组件要求，MUI 4中该回调的第一个参数是React.ChangeEvent<HTMLSelectElement>。

修正后的代码 #

import { useState } from 'react';
import {
  TableContainer,
  Table,
  TableHead,
  TableBody,
  TableRow,
  TableCell,
  TablePagination,
  TableFooter,
} from '@material-ui/core';

// 初始化分页状态
const [page, setPage] = useState(0);
const [rowsPerPage, setRowsPerPage] = useState(5);

const handleChangePage = (_event: React.MouseEvent<HTMLButtonElement> | null, newPage: number) => {
  setPage(newPage);
};

// 修正回调函数的参数类型与逻辑
const handleChangeRowsPerPage = (event: React.ChangeEvent<HTMLSelectElement>, value: number) => {
  setRowsPerPage(value);
  setPage(0); // 切换每页行数后重置到第一页
};

return (
  <>
    <TableContainer>
      <Table>
        <TableHead>{/* 表头内容 */}</TableHead>
        <TableBody>{/* 表格内容 */}</TableBody>
        <TableFooter>
          <TableRow>
            <TablePagination
              rowsPerPageOptions={[5, 10, 15]}
              count={100}
              rowsPerPage={rowsPerPage} {/* 绑定状态变量 */}
              page={page}
              onChangePage={handleChangePage}
              onChangeRowsPerPage={handleChangeRowsPerPage} {/* 使用正确的属性名 */}
            />
          </TableRow>
        </TableFooter>
      </Table>
    </TableContainer>
  </>
);

文档与样式定制说明 #

对于@material-ui/core@4.11.2的TablePagination组件：

• 可查看本地安装包内的node_modules/@material-ui/core/TablePagination/TablePagination.d.ts文件，获取完整的Props类型与样式类名定义。
• 样式定制可通过组件的classes属性覆盖默认样式，或使用withStyles高阶组件进行深度定制，具体的样式类说明可在类型定义文件中找到。

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