如何访问 Material UI 数据网格上的“箭头”按钮单击事件？答案

【问题标题】：How can I access the "arrow" button click event on Material UI data grid?如何访问 Material UI 数据网格上的“箭头”按钮单击事件？
【发布时间】：2021-09-10 02:56:21
【问题描述】：

在Material UI Data Grid 的文档中，它有这个代码 sn-p（我做了一些细微的更改，比如导入 DataGrid 而不是 DataGridPro 等）：

import { DataGrid, useGridApiRef } from '@material-ui/data-grid';
import Alert from '@material-ui/lab/Alert';

export default function PageChange() {
  const apiRef = useGridApiRef();
  const [message, setMessage] = React.useState('');
  const data = {'dummy-data-for-now': ''};

  React.useEffect(() => {
    /* ---- Theoretically I would replace columnResize with 'pageChange' ---- */
    return apiRef.current.subscribeEvent('columnResize', (params) => {
      setMessage(
        `Column ${params.colDef.headerName} resized to ${params.computedWidth}px.`,
      );
    });
  }, [apiRef]);

  return (
    <div style={{ width: '100%' }}>
      <div style={{ height: 180, width: '100%' }}>
        <DataGrid apiRef={apiRef} {...data} />
      </div>
      {message && (
        <Alert severity="info" style={{ marginTop: 8 }}>
          {message}
        </Alert>
      )}
    </div>
  );
}

我一次实现 10 个结果的 API 分页。当我单击箭头按钮时，我希望能够为下一个（或上一个）10 个结果进行新的 API 调用。

文档中提到pageChange作为事件选项，但是当我使用代码sn-p时，我不知道如何使用它。如果有人对如何处理这种情况有任何见解，我将不胜感激。

This is a picture of the data grid button, for reference

【问题讨论】：

{ console.log(params, event); }} /> 你试过吗？记录参数并查看它们包含的内容
在这个页面上有一个“服务器端分页”的例子，这不是你需要的吗？ material-ui.com/ru/components/data-grid/pagination
谢谢@MaxAlex！这帮助我解决了问题。

标签： reactjs pagination material-ui

【解决方案1】：

@MaxAlex，谢谢你的提示！这让我走上了正确的道路，我终于让它与服务器端分页一起工作。 Resource

对我来说，关键是要意识到在 DataGrid 中的 onPageChange 属性上：onPageChange={(newPage) => handlePageChange(newPage)}，“newPage”是一个带有页码的对象。我不需要专门访问前进和后退箭头，而是只需在我的 handlePageChange 函数中管理“newPage”。

【讨论】：