如何从@material-ui获取对xgrid组件的引用

Question

我正在尝试获取对xgrid组件的全局(窗口)引用，这样我就可以从页面上的其他元素与它进行交互。下面的代码向javascript窗口返回一个名为xgridComponent的引用，但该引用只是绑定到所使用的html div标记。它不能访问组件本身的状态或函数。有人能告诉我我哪里做错了吗？

import React, { useState } from "react";
import ReactDOM from 'react-dom';
//import { DataGrid } from '@material-ui/data-grid';
import { XGrid } from '@material-ui/x-grid';
import "regenerator-runtime/runtime";

function filterModelChanged()
{
    console.log(this.getSortModel());
    console.log(this.state.filter.items);
}

function ReaderWorklist({ initialRows, columns }) {
    const [rows, setRows] = useState(initialRows);

    return (
        <div style={{ height: 600, width: '100%' }}>
        <XGrid rows={rows} columns={columns} onFilterModelChange={filterModelChanged} ref={(xgridComponent) => {window.xgridComponent = xgridComponent}} />
            </div>
    );
}

//
async function getData() {
    let response = await fetch("/services/reader_worklist_services/getList",
                                {credentials:"same-origin"});
    return await response.text();
}

//Need to wait till all elements are present before 'latching' onto them with the react componenet
document.addEventListener("DOMContentLoaded", function(event) {
    getData().then(function(data) {
        const rootElement = document.getElementById('reader_worklist_container');
        const jsData = JSON.parse(data);
        ReactDOM.render(<ReaderWorklist initialRows={jsData.rows} columns={jsData.columns} />, rootElement);
    });
});

Answer 1

将filterModelChanged移到ReaderWorkList中。在那里，您还应该声明getSortModel方法并初始化filter状态。此外，由于ReaderWorkList是一个函数组件，因此this不是您认为的那样，您不应该使用它。

就像这样

function ReaderWorklist({ initialRows, columns }) {
  const [rows, setRows] = useState(initialRows);
  const [filter, setFilter] = useState({
    items: [],
  });

  function getSortModel() {
    // return something
  }

  function filterModelChanged() {
    console.log(getSortModel());
    console.log(filter.items);
  }

  return (
    <div style={{ height: 600, width: '100%' }}>
      <XGrid
        rows={rows}
        columns={columns}
        onFilterModelChange={filterModelChanged}
        ref={(xgridComponent) => {
          window.xgridComponent = xgridComponent;
        }}
      />
    </div>
  );
}