如何在MUI Data Grid中检查单列值并实现全Accepted时启用按钮？

核心思路 #

通过React状态管理跟踪网格数据和按钮状态，在单元格提交编辑后更新数据，随后校验所有行的Status是否均为"Accepted"，最终同步控制按钮的启用状态。

完整代码示例 #

import { useState, useCallback, useEffect } from 'react';
import { DataGrid } from '@mui/x-data-grid';
import Button from '@mui/material/Button';

export default function StatusControlledGrid() {
  // 初始化网格数据（可根据实际场景替换为接口数据）
  const [rows, setRows] = useState([
    { id: 1, name: '任务一', status: 'Ready for Review' },
    { id: 2, name: '任务二', status: 'Update Required' },
    { id: 3, name: '任务三', status: 'Accepted' },
  ]);
  // 控制按钮启用状态
  const [isConfirmBtnEnabled, setIsConfirmBtnEnabled] = useState(false);

  // 校验所有行是否均为Accepted状态
  const checkAllStatusAccepted = useCallback(() => {
    const allAccepted = rows.every(row => row.status === 'Accepted');
    setIsConfirmBtnEnabled(allAccepted);
  }, [rows]);

  // 处理单元格提交事件
  const handleCellCommit = useCallback((params) => {
    // 仅处理Status列的编辑提交
    if (params.field === 'status') {
      const updatedRows = rows.map(row => 
        row.id === params.id ? { ...row, status: params.value } : row
      );
      setRows(updatedRows);
    }
  }, [rows]);

  // 数据更新后自动触发校验
  useEffect(() => {
    checkAllStatusAccepted();
  }, [rows, checkAllStatusAccepted]);

  // 列配置：限定Status列为可编辑下拉选择
  const columns = [
    { field: 'name', headerName: '任务名称', width: 220 },
    {
      field: 'status',
      headerName: '状态',
      width: 200,
      editable: true,
      // 渲染单元格内容
      renderCell: (params) => params.value,
      // 配置下拉编辑器，限定可选值
      editCellProps: {
        select: true,
        options: ['Accepted', 'Ready for Review', 'Update Required'],
      },
    },
  ];

  return (
    <div style={{ height: 420, width: '100%', padding: '16px' }}>
      <DataGrid
        rows={rows}
        columns={columns}
        onCellCommit={handleCellCommit}
        editMode="cell"
        disableRowSelectionOnClick
      />
      <div style={{ marginTop: 24 }}>
        <Button
          variant="contained"
          disabled={!isConfirmBtnEnabled}
          size="large"
        >
          所有任务已确认通过
        </Button>
      </div>
    </div>
  );
}

关键细节说明 #

• 编辑模式：使用editMode="cell"开启单元格级编辑，符合单列编辑的需求。
• 输入限制：通过editCellProps给Status列配置下拉选择器，确保用户只能选择指定的三个状态值，避免非法输入。
• 性能优化：用useCallback缓存事件处理和校验函数，useEffect监听数据变化触发校验，减少不必要的组件重渲染。
• 状态同步：每次单元格提交后更新数据，数据变化后自动校验全量行状态，实时同步按钮的启用/禁用状态。

内容的提问来源于stack exchange，提问作者karthik