Refine项目教程：为MUI界面添加删除功能-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00902/article/details/148360874

Refine项目教程：为MUI界面添加删除功能

refine 一个用于构建内部工具、管理面板、仪表盘和B2B应用程序的React框架，具有无与伦比的灵活性。项目地址: https://gitcode.com/gh_mirrors/re/refine

前言

在Web应用开发中，CRUD（创建、读取、更新、删除）操作是最基础也是最核心的功能。本文将详细介绍如何在Refine项目中为Material UI界面实现删除功能，涵盖列表页、详情页和编辑页的删除操作实现。

删除功能实现方案

Refine提供了多种实现删除功能的方式，主要包括：

使用<DeleteButton/>组件
在资源配置中启用canDelete属性
直接使用useDelete钩子

我们将重点介绍前两种最常用的方法。

列表页删除功能实现

1. 添加DeleteButton组件

首先需要在列表页中添加删除按钮：

import { DeleteButton } from "@pankod/refine-mui";

// 在表格的actions列中添加删除按钮
{
    field: "actions",
    headerName: "Actions",
    renderCell: function render({ row }) {
        return (
            <>
                <EditButton hideText recordItemId={row.id} />
                <ShowButton hideText recordItemId={row.id} />
                <DeleteButton hideText recordItemId={row.id} />
            </>
        );
    },
    align: "center",
    headerAlign: "center",
    minWidth: 80,
}

DeleteButton组件特性

自动确认对话框：点击后会弹出确认对话框，防止误操作
简洁API：只需提供recordItemId参数即可
响应式设计：适配不同屏幕尺寸
国际化支持：按钮文本支持多语言

2. 自定义删除行为

如果需要自定义删除行为，可以使用onSuccess和onError回调：

<DeleteButton 
    recordItemId={row.id}
    onSuccess={() => {
        // 删除成功后的回调
        console.log("删除成功");
    }}
    onError={(error) => {
        // 删除失败后的回调
        console.error("删除失败:", error);
    }}
/>

详情页和编辑页删除功能

1. 全局启用删除功能

在应用的主配置文件中，为资源设置canDelete: true：

<Refine
    resources={[
        {
            name: "blog_posts",
            list: BlogPostList,
            edit: BlogPostEdit,
            show: BlogPostShow,
            create: BlogPostCreate,
            canDelete: true,  // 启用删除功能
        },
    ]}
/>

2. 自动生成的删除按钮

启用canDelete后，Refine会自动在以下位置添加删除按钮：

详情页(Show)：页面右上角
编辑页(Edit)：表单底部

这些按钮都内置了确认对话框和错误处理机制。

进阶技巧

1. 条件性显示删除按钮

有时需要根据业务逻辑控制删除按钮的显示：

<DeleteButton 
    recordItemId={row.id}
    disabled={row.status === "published"}  // 已发布的内容不能删除
/>

2. 自定义确认对话框

可以覆盖默认的确认对话框文本：

<DeleteButton
    recordItemId={row.id}
    confirmTitle="确认删除"
    confirmOkText="确定"
    confirmCancelText="取消"
    confirmOkColor="error"
/>

3. 使用useDelete钩子

对于更复杂的场景，可以直接使用useDelete钩子：

import { useDelete } from "@pankod/refine-core";

const { mutate: deleteItem } = useDelete();

const handleDelete = (id: string) => {
    deleteItem({
        resource: "blog_posts",
        id: id,
    }, {
        onSuccess: () => {
            // 自定义成功处理
        },
    });
};