如何禁用反应材料ui DataGrid单元格/字段复选框选择？答案

【问题标题】：How to disable react material ui DataGrid cell/field checkbox selection?如何禁用反应材料ui DataGrid单元格/字段复选框选择？
【发布时间】：2022-01-12 09:32:12
【问题描述】：

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

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

任何帮助将不胜感激

【问题讨论】：

标签： reactjs datagrid material-ui

【解决方案1】：

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

现场演示

【讨论】：