如何在点击MUI DataGrid列内按钮时删除对应数据行

算力阿峰

2026-10-12

你使用的`@material-ui/data-grid@4.0.0-alpha.30`版本完全支持行删除功能，只需要按照React受控组件的标准逻辑实现即可，具体实现步骤如下：

1. 维护受控的行数据状态

把传入DataGrid的users数组放在组件state中管理，保证数据变化可以触发组件重渲染：

import { useState } from 'react';

// 父组件内声明
const [users, setUsers] = useState(/* 你的初始用户数组 */);

2. 定义删除行的处理函数

在同一个父组件内实现删除逻辑，通过过滤数组移除对应id的用户：

const handleDeleteUser = (userId: string) => {
  setUsers(prev => prev.filter(user => user.id.toString() !== userId));
};

3. 调整列配置，传递删除回调

将删除处理函数作为props传给自定义的UserRowActions组件，建议用useMemo包裹columns配置避免不必要的重渲染：

import { useMemo } from 'react';

const columns = useMemo(() => [
  // 其余列配置保持不变
  {
    field: "actions",
    headerName: "",
    width: 120,
    sortable: false,
    renderCell: (params: GridCellParams) => {
      const userId = params.getValue(params.id, "id")?.toString()!;
      return (
        <UserRowActions 
          userId={userId} 
          onDelete={handleDeleteUser} 
        />
      );
    }
  }
], [handleDeleteUser]);

4. 操作按钮绑定点击事件

在UserRowActions组件内部，给删除按钮绑定点击事件，触发上层传入的回调即可：

// UserRowActions 组件代码示例
interface UserRowActionsProps {
  userId: string;
  onDelete: (userId: string) => void;
}

const UserRowActions = (props: UserRowActionsProps) => {
  return (
    <button onClick={() => props.onDelete(props.userId)}>
      删除
    </button>
  );
};