вызовите метод компонента ag-grid-реакции из компонента cellrenderer - PullRequest
Новая
       29

вызовите метод компонента ag-grid-реакции из компонента cellrenderer

1 голос
/ 14 февраля 2020

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

...