如何禁用 React Material ui DataGrid 单元格/字段复选框选择？

Question

我在同一材质 UI DataGrid 表单元格/字段中选择复选框和链接时遇到问题。
问题是其中一个单元格应该有一个外部链接，单击该单元格会重定向到另一个页面，复选框也会被选中。
所以我的目标是禁用这个特定单元格/字段上的复选框选择。
在 Mui 文档中有一个disableSelectionOnClickapi，它只允许从复选框进行检查，但不能从单元格或行进行检查。所以这不是我想要的。我仍然希望能够从除具有链接的单元格之外的行进行检查。在下面提供的示例中，应禁用检查的特定单元格名称是total marks。代码示例和沙箱链接

import * as React from "react";
import { DataGrid } from "@mui/x-data-grid";
import Link from "@mui/material/Link";

const getTotal = (params) =>
  params.getValue(params.id, "maths") + params.getValue(params.id, "science");

const columns = [
  { field: "maths", headerName: "Maths", width: 130 },
  { field: "science", headerName: "Science", width: 130 },
  {
    field: "Total",
    headerName: "Total marks",
    width: 160,
    valueGetter: getTotal,
    editable: true,
    renderCell: (cellValues) => (
      <Link
        target="_blank"
        rel="noopener noreferrer"
        href="https://www.google.com/"
        sx={{ cursor: "pointer" }}
      >
        {cellValues.value}
      </Link>
    )
  }
];

const rows = [
  { id: 1, maths: 75, science: 60 },
  { id: 2, maths: 80, science: 70 },
  { id: 3, maths: 50, science: 80 },
  { id: 4, maths: 80, science: 60 },
  { id: 5, maths: 100, science: 90 }
];

export default function ValueGetterGrid() {
  return (
    <div style={{ height: 400, width: "100%" }}>
      <DataGrid rows={rows} columns={columns} checkboxSelection />
    </div>
  );
}

任何帮助将不胜感激

Answer 1

您可以使用该event.stopPropagation()方法以及field. 分叉你的沙箱并更新它。

现场演示