Data Grid - 事件

訂閱 Data Grid 發出的事件以觸發自訂行為。

訂閱事件

您可以透過為 Data Grid 提供事件處理器，來訂閱發出的事件之一。

處理器是一個方法，它會使用三個參數調用：

包含與事件相關資訊的參數
包含 DOM 事件或 React 合成事件的 MuiEvent（如果可用）
包含 GridApi 的 GridCallbackDetails — 僅當使用 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`);
};

您可以透過幾種方式將此事件處理器提供給 Data Grid：

使用事件的 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 開始編輯

事件目錄

展開列以查看如何使用每個事件。