と呼ばれる機能コンポーネントがありますGenericGrid
import React, { useState } from "react";
import { AgGridReact } from "ag-grid-react";
const GenericGrid = props => {
const [visible, setVisible] = useState(false);
const gridApi = useRef();
const onGridReady = params => {
const { defaultFilter } = props;
gridApi.current = params.api;
const datasource = getServerDataSource(
gridApi.current,
{
size: AppConstants.PAGE_SIZE,
url: baseUrl,
defaultFilter
}
);
gridApi.current.setServerSideDatasource(datasource);
};
... // < == other methods omitted for brevity
const onAddNew = () => setVisible(true);
return (
<>
{!visible && (
<div className="ag-theme-material gridSize">
<AgGridReact
reactNext={true}
onCellValueChanged={onCellValueChanged}
onGridReady={onGridReady}
columnDefs={columnDefs}
pagination={true}
context={GenericGrid} // <== passed the component in context
onSelectionChanged={onRowSelect}
{...props.options}
></AgGridReact>
</div>
)}
{visible &&
clonedElementWithMoreProps(addNewComponent, {
visible,
onHide: () => setVisible(false),
dialogBtnLoading: createNewProgress,
onSubmit: create
})}
</>
);
}
export default GenericGrid;
これで、最後の列の列定義が次のcellRendererFramework
ようになります。
if (field.name === "ViewDetails") {
return {
field: field.name,
colId: field.name,
headerName: field.displayName,
sortable: false,
cellRendererFramework: params => {
console.log("params.context", params.context); // <== prints the definition of 'GenericGrid'
console.log('params.context.onAddNew', params.context.onAddNew) // <== but this prints undefined
return (
<button className="btn btn-sm p-0 btn-link text-cm-primary"
onClick={params.context.onAddNew}
>
View Details
</button>
);
}
};
}
最後の列のボタンをクリックすると、関数を呼び出すonAddNew
か、できればコンポーネントsetValue
で宣言された関数を直接呼び出しGenericGrid
ます。
公式ドキュメントによると、これclass
はコンテキストが次のように渡されるベース コンポーネントで機能しますcontext = { componentParent: this }
。しかし、私のコンポーネントは機能的なコンポーネントであるため、GenericGrid
動作すると仮定してコンテキストで直接渡しましたが、動作しません。