reactjs - Material-UI 从 DataGrid 获取所有行

Question

有谁知道如何从 Material-UI DataGrid 获取所有行数据？例如，我更改了 DataGrid 行中的一些值，并希望在进行更改后获取所有行。例子:

import { Button, TextField } from "@material-ui/core";
import { DataGrid } from "@material-ui/data-grid";
import moment from "moment";

const columns = [
  {
    field: "Col1",
    headerName: "Col1",
    flex: 1.0,
    disableClickEventBubbling: true,
    sortable: false,
    disableColumnMenu: true
  },
  {
    field: "Col2",
    headerName: "Col2",
    flex: 1.0,
    disableClickEventBubbling: true,
    sortable: false,
    disableColumnMenu: true,
    renderCell: (params) => (
      <>
        <TextField
          type="date"
          defaultValue={moment(Date.parse(params.row.Date)).format(
            "YYYY-MM-DD"
          )}
          InputLabelProps={{
            shrink: true
          }}
        />
      </>
    )
  },
  {
    field: "Col3",
    headerName: "Col3",
    flex: 1.0,
    disableClickEventBubbling: true,
    sortable: false,
    disableColumnMenu: true,
    renderCell: (params) => <TextField />
  }
];

const rows = [
  { id: 1, Col1: "col1 data", Col2: null, Col3: null },
  { id: 2, Col1: "col2 data", Col2: null, Col3: null },
  { id: 3, Col1: "col3 data", Col2: null, Col3: null }
];

export default function App() {
  const handleClickButton = () => {
    console.log(rows); //I want to see grid changed data
  };

  return (
    <div className="App">
      <DataGrid
        density="compact"
        rows={rows}
        columns={columns}
        pageSize={25}
        autoHeight={true}
        hideFooter={true}
      />
      <Button variant="contained" color="primary" onClick={handleClickButton}>
        Show me grid data
      </Button>
    </div>
  );
}

Answer 1

Material-UI 的 DataGrid 内部存储了行数据，并有 its own API 来修改行数据。这是当 onChange 触发时更新行数据的方式:

{
  field: "Col3",
  headerName: "Col3",
  renderCell: (params) => (
    <TextField
      onChange={(e) =>
        params.api.updateRows([{ ...params.row, Col3: e.target.value }])
      }
    />
  )
}

要读取 DataGrid 的当前行状态，您可以使用 apiRef.current.getRowModels() 。但是 apiRef 来自 Material-UI X Pro 。如果您仍然想访问它，则必须使用以下技巧:

function useApiRef() {
  const apiRef = useRef(null);
  const _columns = useMemo(
    () =>
      columns.concat({
        field: "__HIDDEN__",
        width: 0,
        renderCell: (params) => {
          apiRef.current = params.api;
          return null;
        }
      }),
    [columns]
  );

  return { apiRef, columns: _columns };
}

用法

const { apiRef, columns } = useApiRef();
const handleClickButton = () => {
  console.log(apiRef.current.getRowModels());
};

return (
  <>
    <DataGrid rows={rows} columns={columns} />
    <Button onClick={handleClickButton}>
      Show data
    </Button>
  </>
);

现场演示