Показать сообщение отдельно
  #1 (permalink)  
Старый 21.02.2022, 19:19
Кандидат Javascript-наук
Отправить личное сообщение для od0201 Посмотреть профиль Найти все сообщения от od0201
 
Регистрация: 07.05.2020
Сообщений: 108

React DataGrid data
в material ui есть компонент DataGrid, мне нужно получить данные с него. Получить я могу через Ref, на просторах интерента нашел такой код, и он работает. Но мне кажется что это не совсем правильно. Тем более у DataGrid есть useGridApiContext() для получения Ref, но как ее передать в handleHelp не могу догнать
Также в доках пишут "The ref is forwarded to the root element. This means that, without changing the rendered root element via the component prop, it is forwarded to the outermost DOM element which the component renders. If you pass a different component via the component prop, the ref will be attached to that component instead" но как его словить я не знаю (мало опыта)
const columns = [
  { field: 'datetime',  headerName: 'дата/время', width: 120, align:'center'},
  { field: 'order',     headerName: '№ заказа', width: 100 , align:'center'},
  { field: 'installers', headerName: 'установщики', width: 120,  align:'center' },
];

function useApiRef() {
  const apiRef = React.useRef(null);
  const _columns = React.useMemo( () =>columns.concat({field: "__HIDDEN__", width: 0,renderCell: (params) => {apiRef.current = params.api;return null;}}), []  );
  return { apiRef, columns: _columns };
}
export function TodosTable(props) {
  const { apiRef, columns } = useApiRef();
  const handleHelp=()=>{
    console.log(apiRef.current.getVisibleRowModels())
  }
  return (<>
    <DataGrid
      rows={props.rows}
      columns={columns}
    />
    <Button onClick={handleHelp} >+</Button>
  </>)
}

Последний раз редактировалось od0201, 21.02.2022 в 20:11.
Ответить с цитированием