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

最新推荐文章于 2025-06-13 11:30:40 发布

原创最新推荐文章于 2025-06-13 11:30:40 发布 · 376 阅读

10 ·

CC 4.0 BY-SA版权

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

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

前言

在Web应用开发中，CRUD（创建、读取、更新、删除）操作是最基础也是最重要的功能之一。本文将详细介绍如何在Refine项目中，使用Chakra UI组件库实现删除功能，涵盖列表页、详情页和编辑页的删除操作实现。

删除功能实现概述

Refine框架提供了完善的删除功能支持，主要包括：

列表页的单项删除
详情页的删除按钮
编辑页的删除按钮
删除确认对话框（内置）
删除后的状态管理和UI更新

列表页删除功能实现

1. 准备工作

首先确保你已经创建了基本的列表页面，并配置好了数据源和路由。我们将使用<DeleteButton/>组件来实现删除功能。

2. 导入DeleteButton组件

在列表页组件中导入必要的组件：

import { DeleteButton, ShowButton, EditButton } from "@refinedev/chakra-ui";
import { HStack } from "@chakra-ui/react";

3. 添加删除按钮到表格

在表格的操作列中添加删除按钮：

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

4. 功能说明

hideText属性：只显示图标，不显示文字
recordItemId：指定要删除的记录ID
点击按钮会自动显示确认对话框，确认后执行删除操作
删除成功后会自动更新列表数据

全局删除功能配置

除了列表页，我们通常也需要在详情页和编辑页提供删除功能。Refine提供了全局配置方式：

1. 修改资源配置

在应用主配置文件中，为资源添加canDelete元数据：

resources={[
    {
        name: "blog_posts",
        meta: {
            canDelete: true,  // 启用删除功能
        },
    },
]}

2. 效果说明

配置后，以下页面将自动显示删除按钮：

详情页（Show Page）：右上角显示删除按钮
编辑页（Edit Page）：右上角显示删除按钮

高级用法：自定义删除操作

如果需要更精细的控制，可以使用useDelete钩子：

import { useDelete } from "@refinedev/core";

const { mutate: deleteItem } = useDelete();

// 自定义删除函数
const handleDelete = (id: string) => {
    deleteItem({
        resource: "blog_posts",
        id: id,
    });
};