React Material UI - DataGrid onRowClick

Question

我对 React 和 Material UI 完全陌生。我已经按照YouTube的步骤创建了DataGrid，但现在我想再创建一个功能，当我点击DataGrid的一行时，界面会跳转到该行的详细信息页面。

非常感谢！！

`

import { Box } from "@mui/material";
import { DataGrid, GridToolbar } from "@mui/x-data-grid";
import { tokens } from "../../theme";
import { mockDatareworks } from "../../data/mockData";
import Header from "../../components/Header";
import { useTheme } from "@mui/material";

const Reworks = () => {
  const theme = useTheme();
  const colors = tokens(theme.palette.mode);

  const columns = [
    { field: "id", headerName: "ID", flex: 0.5 },
    { field: "return_date", headerName: "Date" },
    {
      field: "customer_name",
      headerName: "Customer",
      flex: 1,
      cellClassName: "name-column--cell",
    },
    {
      field: "product_name",
      headerName: 'Product',
      flex: 1,
    },
    {
      field: "rework_quantity",
      headerName: "Quantity",
      type: "number",
      headerAlign: "left",
      align: "left",
    },
  ];

  return (
    <Box m="20px">
      <Header
        title="Rework"
        subtitle="List of reworks for Future Reference"
      />
      <Box
        m="40px 0 0 0"
        height="75vh"
        sx={{
          "& .MuiDataGrid-root": {
            border: "none",
          },
          "& .MuiDataGrid-cell": {
            borderBottom: "none",
          },
          "& .name-column--cell": {
            color: colors.greenAccent[300],
          },
          "& .MuiDataGrid-columnHeaders": {
            backgroundColor: colors.blueAccent[700],
            borderBottom: "none",
          },
          "& .MuiDataGrid-virtualScroller": {
            backgroundColor: colors.primary[400],
          },
          "& .MuiDataGrid-footerContainer": {
            borderTop: "none",
            backgroundColor: colors.blueAccent[700],
          },
          "& .MuiCheckbox-root": {
            color: `${colors.greenAccent[200]} !important`,
          },
          "& .MuiDataGrid-toolbarContainer .MuiButton-text": {
            color: `${colors.grey[100]} !important`,
          },
        }}
      >
        <DataGrid
          rows={mockDatareworks}
          columns={columns}
          components={{ Toolbar: GridToolbar }}
        />
      </Box>
    </Box>
  );
};

export default Reworks;

`

这是我当前DataGrid页面的代码，如何添加点击跳转到该行详情页的功能？

Answer 1

请使用

onRowClick

道具

https://mui.com/x/react-data-grid/events/

        <DataGrid
          rows={mockDatareworks}
          columns={columns}
          components={{ Toolbar: GridToolbar }}
          onRowClick={handleRowClick} // here
        />

这里是handleRowClick 段落

const handleRowClick = (
  params, // GridRowParams
  event, // MuiEvent<React.MouseEvent<HTMLElement>>
  details, // GridCallbackDetails
) => {
  setMessage(params);
};

Answer 2

在网格 v6 中，onRowClick 事件接收具有三个 props 的事件：

{
   columns: [{ <your column spec> }],
   id: string,
   row: { <your row model> }
}

如果您激活了

checkboxSelection

选项，则不会包括是否选择该行。有一个自动生成的特殊列，其 id

__check__

不包含在行模型中。

我发现访问 isSelected 的唯一方法是使用 apiRef.current.isRowSelected。不理想，但它有效。