獲取 Material UI DataGrid 的數據

Question

我正在使用 Material UI 處理表格。 表中有數據。 我想獲取它的數據以將其傳遞給下一個組件。 我試過tableRef = useRef()但失敗了。 它返回undefined 。 怎么做到的？ 代碼如下：

import React, { useEffect, useRef } from "react";
import { DataGrid, GridRowsProp, GridColDef, GridToolbarContainer, GridToolbarExport } from "@mui/x-data-grid";
import { Stack, Button } from "@mui/material";
import DeleteIcon from "@mui/icons-material/Delete";
import EditIcon from "@mui/icons-material/Edit";
import FolderIcon from "@mui/icons-material/Folder";
import KeyboardTabIcon from "@mui/icons-material/KeyboardTab";

const columnOptions = {
  editable: true,
  headerAlign: "center",
  width: 500,
  align: "center",
  disableColumnMenu: true,
  sortable: false,
};

const rows = [
  { id: 1, col1: "Kontreyler terminali", col2: 0, col3: 0 },
  { id: 2, col1: "Acer", col2: 10, col3: 10 },
  { id: 3, col1: "Microsoft", col2: 20, col3: 20 },
  { id: 4, col1: "Samsung", col2: 30, col3: 30 },
  { id: 5, col1: "Apple", col2: 40, col3: 40 },
];

const columns = [
  { field: "col1", headerName: "Hududlar", ...columnOptions },
  { field: "col2", headerName: "X koordinata", ...columnOptions },
  { field: "col3", headerName: "Y koordinata", ...columnOptions },
];

const Home = () => {
  const tableRef = useRef()

  // Log its value after the component rendered
  useEffect(() => {
    console.log(tableRef.current)
  }, [])

  return (
    <div style={{ height: "92.5vh", width: "100%" }}>
      <DataGrid
        rows={rows}
        columns={columns}
        editMode="cell"
        autoHeight="true"
        density="comfortable"
        hideFooter="true"
        sx={{ fontSize: "20px", "& .MuiDataGrid-cell:hover": { color: "primary.main", }, fontFamily: "'Roboto', sans-serif", fontWeight: 600, }}
      />
      <Stack
        direction={"row"}
        spacing={5}
        sx={{
          mt: "15px",
          alignItems: "center",
          justifyContent: "center",
        }}
      >
        <Button 
          variant="contained" 
          size="large" 
          startIcon={<FolderIcon />}
          onClick={() => {}}
        >
          Get Data
        </Button>
        <Button variant="outlined" size="large" startIcon={<KeyboardTabIcon />}>
          Next
        </Button>
      </Stack>
    </div>
  );
};

export default Home;

Answer 1

您沒有將值應用於tableRef ，因此undefined是可以預料的。

我將rows的名稱更改為 predefinedRows。

const predefinedRows = [
  { id: 1, col1: "Kontreyler terminali", col2: 0, col3: 0 },
  { id: 2, col1: "Acer", col2: 10, col3: 10 },
  { id: 3, col1: "Microsoft", col2: 20, col3: 20 },
  { id: 4, col1: "Samsung", col2: 30, col3: 30 },
  { id: 5, col1: "Apple", col2: 40, col3: 40 },
];

現在我們需要跟蹤 DataGrid 的行 state。 我們可以通過為rows添加 state 並使用predefinedRows對其進行初始化來解決此問題。

const [rows, setRows] = useState(predefinedRows);

要在發生變化時更新 state，我們需要添加某種處理程序。 這將從DataGrid接收newRow和oldRow 。 我們在它們之上創建行和 map 的副本。 如果我們找到具有相同id的行，我們返回newRow否則我們返回oldRow 。

const processRowUpdate = (newRow, oldRow) => {
  setRows((prevRows) => {
    const newRows = [...prevRows].map((row) => {
      if (row.id === newRow.id) return newRow;
      return row;
    });
    return newRows;
  });
  // the DataGrid expects the newRow as well
  return newRow;
};

在DataGrid中，我們可以添加一個processRowUpdate來自行處理行更改。

<DataGrid
  rows={rows}
  columns={columns}
  ...
  processRowUpdate={processRowUpdate}
  experimentalFeatures={{ newEditingApi: true }}
/>

您可以將rows state 用於您想要的任何內容。