如何在点击Material-UI DataGrid内的Checkbox（非行选择）时即时提交变更？

看起来你遇到的核心问题是DataGrid默认的行/单元格编辑机制拦截了Checkbox的后续点击事件——当你第一次点击Checkbox时，单元格进入了编辑状态，此时内部组件的状态变更不会触发DataGrid重新渲染，直到你点击单元格外部提交编辑。结合你的需求（不需要编辑功能，仅保留Checkbox和下拉菜单），我们可以通过以下步骤解决：

1. 完全禁用DataGrid的编辑功能 #

首先要关掉DataGrid默认的编辑行为，避免它干扰你的自定义组件交互。在DataGrid组件上添加editMode="none"属性，彻底禁用编辑模式：

<DataGrid 
  rows={rows} 
  columns={columns} 
  editMode="none" // 关键：禁用所有编辑功能
/>

2. 为每行Checkbox独立管理状态 #

你的代码里用了全局的myModel.checked，这会导致所有行的Checkbox状态同步变化，而且无法触发DataGrid的重新渲染。我们需要为每行单独维护选中状态：

import { useState } from 'react';
import { DataGrid, GridCellParams } from '@mui/x-data-grid';
import Checkbox from '@mui/material/Checkbox';

export default function MyGrid() {
  // 用对象存储每行的选中状态，key是行id
  const [checkedRows, setCheckedRows] = useState({});

  const rows = [
    { id: 1, fieldName: "ID" },
    { id: 2, fieldName: "VisitId" },
    { id: 3, fieldName: "First Name" }
  ];

  const columns = [
    {
      field: "fieldName",
      headerName: "fieldName",
      flex: 1,
      renderCell: (param: GridCellParams) => {
        const rowId = param.row.id;
        // 当前行的选中状态
        const isChecked = checkedRows[rowId] || false;

        const handleChange = () => {
          // 更新当前行的选中状态
          setCheckedRows(prev => ({
            ...prev,
            [rowId]: !isChecked
          }));
        };

        return (
          <Checkbox 
            onChange={handleChange} 
            checked={isChecked} 
            onClick={(e) => e.stopPropagation()} // 阻止事件冒泡到DataGrid的单元格
          />
        );
      },
    }
  ];

  return <DataGrid rows={rows} columns={columns} editMode="none" />;
}

关键细节解释 #

• editMode="none"：这会让DataGrid不再处理任何编辑相关的事件，单元格不会进入编辑状态，你的Checkbox点击事件就能正常触发。
• 独立状态管理：用checkedRows对象存储每行的选中状态，确保每行Checkbox状态独立，且状态更新会触发组件重新渲染。
• e.stopPropagation()：阻止Checkbox的点击事件冒泡到DataGrid的单元格，避免DataGrid触发不必要的交互逻辑（比如虽然禁用了编辑，但有些默认事件可能还会触发）。

如果你需要把选中状态同步到行数据中 #

如果需要将选中状态保存到rows数据里，可以结合DataGrid的api.updateRows方法：

const handleChange = () => {
  // 更新本地状态
  const newChecked = !isChecked;
  setCheckedRows(prev => ({...prev, [rowId]: newChecked}));
  
  // 同步更新行数据（如果需要的话）
  param.api.updateRows([{
    id: rowId,
    checked: newChecked // 假设你的行数据里有checked字段
  }]);
};

这样就能彻底解决Checkbox点击仅生效一次的问题，同时保留你需要的自定义组件交互。

内容的提问来源于stack exchange，提问作者I Stand With Israel