如何在 mui datagrid 中添加自定义插槽道具？

Question

使用 mui datagrid 实现自定义分页。 我尝试使用 datagrid 的 slotProps 传递分页的 props，但它说 onChange 的类型不匹配。我该如何纠正它？ 我做错了什么？...

这是数据网格源

const handleChangePagination = (event: React.ChangeEvent<unknown>, value: number) => {
    console.log('test', value)
  }

<DataGrid
        rows={rows}
        columns={columns}
        checkboxSelection
        autoHeight
        disableColumnMenu
        paginationModel={paginationModel}
        slots={{
          pagination: Pagination,
          toolbar: DataGridTitle,
        }}
        slotProps={{
          pagination: {
            page: paginationModel.page,
            count: Math.round(rows.length / paginationModel.pageSize),
//error   in onChange!         TS2322: Type '(event: React.ChangeEvent , value: number) => void' is not assignable to type 'FormEventHandler '.
            onChange: handleChangePagination,
          },
        }}
        onPaginationModelChange={setPaginationModel}
        disableRowSelectionOnClick
        rowSelection
        hideFooterSelectedRowCount
      />

分页组件源码就是这个

interface PaginationProps {
  page: number
  count: number
  onChange: (event: React.ChangeEvent<unknown>, page: number) => void
}

const Pagination = ({ page, count, onChange }: PaginationProps) => {
  return (
    <MuiPagination
      color="standard"
      variant="text"
      shape="rounded"
      page={page}
      count={count}
      renderItem={(props) => <PaginationItem {...props} />}
      onChange={onChange}
      showFirstButton
      showLastButton
    />
  )
}

Answer 1

尝试这样：

onChange: (e, v) => handleChange(e, v)

你也可以尝试这个：

onChange: (e:any) => handleChange(e.target.value)

如果有效的话，也将其设置为另一侧的“任意” 您需要调整类型，因为 MUI 可能需要“FormEventHandler”，而不是您正在使用的类型

Answer 2

onChange

是保留术语。将您的道具更改为

onPaginationChange

或其他东西，您会遇到更少的问题。