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-UIDataGrid在内部存储行数据，并有自己的 API来修改行数据。这是在触发时更新行数据的方式onChange：

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

在版本 5 中，您只需将列标记为editable。（参见单元格编辑）

{
  field: "Col3",
  headerName: "Col3",
  editable: true
}

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

{
  field: "Col3",
  headerName: "Col3",
  editable: true
}

用法

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 };
}

现场演示