Refine项目教程：使用Chakra UI实现删除功能-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_01039/article/details/148360859

Refine项目教程：使用Chakra UI实现删除功能

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

前言

在Web应用开发中，CRUD（创建、读取、更新、删除）操作是最基础也是最重要的功能之一。本文将重点介绍如何在Refine项目中实现删除功能，特别是使用Chakra UI作为UI框架时的实现方法。

删除功能的实现方式

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

使用<DeleteButton/>组件
通过资源配置启用删除功能
使用useDelete钩子

我们将重点介绍前两种方式，它们是最常用的实现方法。

在列表页添加删除功能

1. 准备工作

首先确保你已经创建了列表页面文件src/pages/blog-posts/list.tsx，并且已经配置好了基本的表格展示功能。

2. 导入DeleteButton组件

在列表页文件中，从@pankod/refine-chakra-ui导入DeleteButton组件：

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

3. 添加到表格操作列

在表格的操作列中添加DeleteButton组件，通常与"查看"和"编辑"按钮一起使用：

{
    id: "actions",
    accessorKey: "id",
    header: "Actions",
    cell: function render({ getValue }) {
        return (
            <HStack>
                <ShowButton
                    hideText
                    recordItemId={getValue() as string}
                />
                <EditButton
                    hideText
                    recordItemId={getValue() as string}
                />
                <DeleteButton
                    hideText
                    recordItemId={getValue() as string}
                />
            </HStack>
        );
    },
}

4. 功能说明

recordItemId属性：指定要删除的记录ID
hideText属性：隐藏按钮文字，只显示图标
点击后会显示确认对话框，防止误操作

在详情页和编辑页启用删除功能

1. 资源配置

在应用的主配置文件（通常是src/App.tsx）中，找到资源定义部分，为blog_posts资源添加canDelete: true配置：

resources={[
    {
        name: "blog_posts",
        list: BlogPostList,
        edit: BlogPostEdit,
        show: BlogPostShow,
        create: BlogPostCreate,
        canDelete: true,
    },
]}

2. 自动生效

配置完成后，Refine会自动在以下位置添加删除按钮：

详情页（Show页面）的右上角
编辑页（Edit页面）的右上角

这是因为Refine的<Show/>和<Edit/>组件会自动检测canDelete配置并添加相应的删除按钮。

进阶使用

自定义删除行为

如果需要自定义删除行为，可以使用useDelete钩子：

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

const { mutate: deletePost } = useDelete();

// 调用删除
deletePost({
    resource: "blog_posts",
    id: "123",
});

删除确认对话框定制

<DeleteButton/>组件支持自定义确认对话框的内容和行为：

<DeleteButton
    recordItemId="123"
    confirmTitle="确认删除?"
    confirmOkText="确定"
    confirmCancelText="取消"
    onSuccess={() => console.log('删除成功')}
/>