MUI X Data Grid选中行时如何启用按钮？

核心逻辑 #

直接调用DataGrid内置的行选择事件监听选中状态，只要存在至少1条选中行就解除Approve按钮的禁用状态，无选中项时保持按钮禁用即可。

具体修改步骤 #

• 优化状态定义：除了按钮禁用状态，可同步存储选中行ID列表，方便后续审批操作直接获取选中数据
• 给DataGrid组件绑定onSelectionModelChange回调，每次勾选/取消勾选时自动触发状态更新
• 可选配置selectionModel属性做受控选择绑定，避免组件内部状态和页面状态不同步

修改后可直接复用的代码 #

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

// 原有rows、columns列定义、行数据保持不变即可
export default function BatchApproveTable() {
  // 修正原代码中setApproveStatee的拼写笔误，同时存储选中行ID列表
  const [selectedRowIds, setSelectedRowIds] = useState([]);
  const [approveState, setApproveState] = useState({
    disabled: true,
  });

  // 行选择变化触发的回调
  const handleRowSelectChange = (newSelection) => {
    setSelectedRowIds(newSelection);
    // 选中行数为0时按钮禁用，否则启用
    setApproveState({
      disabled: newSelection.length === 0
    });
  };

  const handleApproveAll = () => {
    // 批量审批逻辑可直接通过selectedRowIds获取所有选中行ID
    console.log('待审批行ID列表：', selectedRowIds);
  };

  return (
    <>
      <Button
        variant="contained"
        color="primary"
        disabled={approveState.disabled}
        sx={{ mb: 1 }}
        onClick={handleApproveAll}
      >
        Approve
      </Button>
      <div style={{ height: 400, width: "100%" }}>
        <DataGrid
          rows={rows}
          columns={columns}
          pageSize={5}
          rowsPerPageOptions={[5]}
          checkboxSelection
          // 绑定选择变更事件
          onSelectionModelChange={handleRowSelectChange}
          // 受控绑定选中项，避免状态不一致
          selectionModel={selectedRowIds}
        />
      </div>
    </>
  )
}

精简写法参考 #

如果不需要额外留存选中行数据，可以直接简化状态逻辑，代码量更少：

// 直接存储按钮禁用状态即可
const [isApproveDisabled, setIsApproveDisabled] = useState(true);

// DataGrid组件内直接绑定事件
<DataGrid
  {/* 其他原有属性保持不变 */}
  checkboxSelection
  onSelectionModelChange={(selectionList) => setIsApproveDisabled(selectionList.length === 0)}
/>

// Button组件直接绑定状态
<Button
  {/* 其他原有属性保持不变 */}
  disabled={isApproveDisabled}
>
  Approve
</Button>

内容的提问来源于stack exchange，提问作者John Michael Vicmudo