数据表格 - 事件

订阅数据表格发出的事件以触发自定义行为。

订阅事件

您可以通过向数据表格提供事件处理程序来订阅其发出的事件之一。

处理程序是一个使用三个参数调用的方法

包含与事件相关信息的参数
`MuiEvent` 包含 DOM 事件或 React 合成事件（如果可用）
`GridCallbackDetails` 包含 `GridApi` — 仅当使用 Data Grid Pro 或 Data Grid Premium 时

例如，这是一个 `rowClick` 事件的事件处理程序

const handleEvent: GridEventListener<'rowClick'> = (
  params, // GridRowParams
  event, // MuiEvent<React.MouseEvent<HTMLElement>>
  details, // GridCallbackDetails
) => {
  setMessage(`Movie "${params.row.title}" clicked`);
};

您可以通过几种方式将此事件处理程序提供给数据表格

使用事件的 prop

<DataGrid onRowClick={handleEvent} {...other} />

以下演示展示了如何使用 onRowClick prop 订阅 rowClick 事件 — 点击任何行尝试一下

使用 `useGridApiEventHandler`

useGridApiEventHandler(apiRef, 'rowClick', handleEvent);

以下演示展示了如何使用 useGridApiEventHandler 订阅 rowClick 事件 — 点击任何行尝试一下

使用 `apiRef.current.subscribeEvent`

apiRef.current.subscribeEvent('rowClick', handleEvent);

以下演示展示了如何使用 apiRef.current.subscribeEvent 订阅 rowClick 事件 — 点击任何行尝试一下

禁用默认行为

根据用例，可能需要禁用事件采取的默认操作。传递给事件处理程序的 MuiEvent 具有 defaultMuiPrevented 属性，用于控制何时可以执行默认行为。将其设置为 true 以阻止事件的默认处理并实现您自己的处理。

<DataGrid
  onCellClick={(params: GridCellParams, event: MuiEvent<React.MouseEvent>) => {
    event.defaultMuiPrevented = true;
  }}
/>

通常，双击单元格会使其进入编辑模式。以下示例通过同时要求最终用户按下 Ctrl 键来更改此行为

<DataGrid
  onCellDoubleClick={(params, event) => {
    if (!event.ctrlKey) {
      event.defaultMuiPrevented = true;
    }
  }}
  {...data}
  loading={loading}
/>

<DataGrid
  onCellDoubleClick={(params, event) => {
    if (!event.ctrlKey) {
      event.defaultMuiPrevented = true;
    }
  }}
  {...data}
  loading={loading}
/>

按 Enter 开始编辑

事件目录

展开行以查看如何使用每个事件。