2

と呼ばれる機能コンポーネントがあります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動作すると仮定してコンテキストで直接渡しましたが、動作しません。

4

0 に答える 0