Как получить доступ к ag-Grid API в компоненте функции React (useState hook)? - PullRequest
Новая
       115

Как получить доступ к ag-Grid API в компоненте функции React (useState hook)?

2 голосов
/ 07 февраля 2020

Каков наилучший способ доступа к ag-Grid API внутри Функция реагирования компонент?

Мне нужно использовать некоторые методы из API (getSelectedNodes, setColumnDefs et c.), Поэтому я сохраняю ссылку на API (используя useState hook) в обработчике событий onGridReady: 

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

, а затем я могу вызвать API например: gridApi.getSelectedNodes()

Я не заметил никаких проблем с этим подходом, но мне интересно, есть ли еще идиоматический c способ?

Стек :

  • ag-grid-community & ag-grid-реакции 22.1.1
  • реагировать 16.12.0

Ответы [ 3 ]

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

Ну, я делаю это в моем проекте. Вы можете использовать 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
};
0 голосов
/ 11 февраля 2020

Я столкнулся с той же проблемой, но здесь есть обходной путь, который, по крайней мере, может получить выбранные вами строки. По сути, я делаю отправку 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;
          }}
        />);
0 голосов
/ 10 февраля 2020

Просто интересно, зачем вам нужно использовать state-hook, cuz gridApi не будет изменяться в течение жизненного круга.

Если вы проверите образцы команды ag-grid, вы увидите, что они для этого используется только привязка свойства: 

onGridReady = params => {
    this.gridApi = params.api;
    this.gridColumnApi = params.columnApi;
};

Итак, я полагаю, вам не нужно использовать state для хранения ссылки API.

...