ag-grid-react Reactjs 中的行单击事件的名称是什么？

Question

如果用户单击或选择 ag-grid 中的一行，那么我想触发单击事件。我搜索了文档但没有运气。

Answer 1

分别称为

onRowClicked

和

onRowSelected

。即使您禁用行选择，当您单击一行时也会调用

onRowClicked

。

onRowSelected

另一方面，仅在选择一行时才会触发

<AgGridReact
  columnDefs={columnDefs}
  onRowSelected={(e) => console.log("row selected", e.rowIndex)}
  onRowClicked={(e) => console.log("row clicked", e.rowIndex)}
  rowSelection="multiple"
  rowData={rowData}
/>

另一种方法是使用

GridApi.addGlobalListener()

捕获所有 ag-grid 事件并过滤掉您不感兴趣的事件。

const onGridReady = (params: GridReadyEvent) => {
  params.api.addGlobalListener((type: string, e) => {
    if (type === "rowClicked" || type === "rowSelected") {
      console.log(type, "from global event handler");
    }
  });
};

现场演示

Answer 2

我们使用 onRowClicked 属性来获取行数据值

const rowDataSelection = useCallback(value => {
    setRowData({rowData: value.data || {}})
})

<Grid
    onRowClicked={rowDataSelection}
/>