У меня есть функциональный компонент с именем 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;
Теперь есть столбец def для последнего столбца, который имеет 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
в контексте, предполагая, что он будет работать, но это не так.