如何在 React 函数组件(useState hook)中访问 ag-Grid API?

Question

在React 函数组件中访问 ag-Grid API 的最佳方式是什么？

我必须使用 API 中的一些方法(getSelectedNodes、setColumnDefs等(，所以我在事件处理程序中保存onGridReady对 API 的引用(使用useState钩子(：

onGridReady={params => {
setGridApi(params.api);
}}

然后我可以像这样调用 API：gridApi.getSelectedNodes()

我没有注意到这种方法有任何问题，但我想知道是否有更惯用的方法？

叠：

• AG-grid-community & AG-grid-react 22.1.1
• 反应 16.12.0

Answer 1

我们找到了使用 ref 的最惯用方法。因为 api 不是我们组件的状态。实际上可以简单地执行以下操作：

<AgGridReact ref={grid}/>

然后与

grid.current.api

这里有一个例子：

import React, { useRef } from 'react'
import { AgGridReact } from 'ag-grid-react'
import { AgGridReact as AgGridReactType } from 'ag-grid-react/lib/agGridReact'
const ShopList = () => {
const grid = useRef<AgGridReactType>(null)
...
return (
<AgGridReact ref={grid} columnDefs={columnDefs} rowData={shops} />
)
}

这里的好处是，您将可以访问gridApi，但可以访问列Api。简单来说，就像这样：

// rendering menu to show/hide columns:
{columnDefs.map(columnDef =>
<>
<input
type='checkbox'
checked={
grid.current
? grid.current.columnApi.getColumn(columnDef.field).isVisible()
: !(columnDef as { hide: boolean }).hide
}
onChange={() => {
if (grid.current?.api) {
const col = grid.current.columnApi.getColumn(columnDef.field)
grid.current.columnApi.setColumnVisible(columnDef.field, !col.isVisible())
grid.current.api.sizeColumnsToFit()
setForceUpdate(x => ++x)
}
}}
/>
<span>{columnDef.headerName}</span>
</>
)}

Answer 2

好吧，我正在我的项目中这样做。您可以使用useRef钩子来存储gridApi。

const gridApi = useRef();
const onGridReady = params => {
gridApi.current = params.api;  // <== this is how you save it
const datasource = getServerDataSource(
gridApi.current,
{
size: AppConstants.PAGE_SIZE,
url: baseUrl,
defaultFilter: props.defaultFilter
}
);
gridApi.current.setServerSideDatasource(datasource); // <== this is how you use it
};

Answer 3

我遇到了同样的问题，但这里有一个解决方法，至少可以让您获得选定的行。从本质上讲，我正在做的是将 api 从 agGrid 回调发送到另一个函数。具体来说，我使用 OnSelectionChanged 回调来获取当前行节点。示例如下：

const onSelectionChanged = params => {
setDetails(params.api.getSelectedRows());
};
return (<AgGridReact
columnDefs={agData.columnDefs}
rowSelection={'single'}
enableCellTextSelection={true}
defaultColDef={{
resizable: true,
}}
rowHeight={50}
rowData={agData.rowData}
onCellFocused={function(params) {
if (params.rowIndex != null) {
let nNode = params.api.getDisplayedRowAtIndex(params.rowIndex);
nNode.setSelected(true, true);
}
}}
onSelectionChanged={function(params) {
onSelectionChanged(params);
params.api.sizeColumnsToFit();
}}
onGridReady={function(params) {
let gridApi = params.api;
gridApi.sizeColumnsToFit();
}}
deltaRowDataMode={true}
getRowNodeId={function(data) {
return data.id;
}}
/>);