当前位置：首页 > news >正文

如何快速实现Refine+Ant Design的CRUD删除功能：新手友好指南

news 2026/6/5 11:17:20

如何快速实现Refine+Ant Design的CRUD删除功能：新手友好指南

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

Refine是一个用于构建内部工具、管理面板、仪表盘和B2B应用程序的React框架，具有无与伦比的灵活性。本文将详细介绍如何在Refine项目中使用Ant Design组件库实现CRUD操作中的删除功能，即使是React新手也能轻松掌握。

为什么选择Refine+Ant Design构建管理系统？

Refine作为一款专注于企业级应用开发的React框架，与Ant Design的结合为开发者提供了强大的工具集。Ant Design提供了丰富的UI组件，而Refine则处理了数据管理、认证、权限等复杂逻辑，让开发者可以专注于业务功能实现。

图：使用Refine和Ant Design构建的Fine Foods管理系统仪表盘，展示了数据可视化和操作界面

准备工作：搭建Refine项目环境

在开始实现删除功能之前，需要确保你的Refine项目已经正确配置了Ant Design。如果尚未创建项目，可以通过以下命令快速搭建：

git clone https://gitcode.com/GitHub_Trending/re/refine cd refine/examples/antd npm install

安装完成后，你可以在src/pages目录下找到各个功能模块的实现文件，我们将主要在这些文件中添加删除功能。

实现删除功能的核心步骤

1. 理解Refine的数据删除流程

Refine通过dataProvider处理与后端的交互，删除操作主要通过useDelete钩子实现。这个钩子提供了删除数据的方法和状态管理，包括加载状态、错误处理等。

2. 在表格中添加删除按钮

在Ant Design的表格组件中，我们可以通过actions列添加删除按钮。以下是一个典型的实现方式：

// 示例代码位置：src/pages/products/list.tsx import { useDelete } from "@pankod/refine-core"; import { Table, Button, Space } from "antd"; import { DeleteOutlined } from "@ant-design/icons"; export const ProductList: React.FC = () => { const { mutate: deleteProduct } = useDelete(); const columns = [ // 其他列定义... { title: "操作", key: "actions", render: (_, record) => ( <Space size="middle"> <Button icon={<DeleteOutlined />} danger onClick={() => { deleteProduct({ resource: "products", id: record.id, }); }} > 删除 </Button> </Space> ), }, ]; // 表格组件实现... };

3. 添加确认对话框

为了防止误操作，通常会在删除前显示确认对话框。Ant Design的Modal.confirm组件可以轻松实现这一功能：

// 示例代码位置：src/pages/products/list.tsx import { Modal } from "antd"; // 在删除按钮的onClick事件中添加 onClick={() => { Modal.confirm({ title: "确认删除", content: `确定要删除 ${record.name} 吗？此操作不可撤销。`, okText: "确认", cancelText: "取消", onOk: () => { deleteProduct({ resource: "products", id: record.id, }); }, }); }}

图：删除操作的确认对话框示例，帮助用户避免误操作

4. 处理删除后的状态更新

删除操作完成后，需要刷新表格数据以反映最新状态。Refine的useDelete钩子会自动处理缓存更新，但你也可以通过onSuccess回调手动触发刷新：

const { mutate: deleteProduct, isLoading } = useDelete({ onSuccess: () => { // 显示成功提示 message.success("删除成功"); // 刷新表格数据 refresh(); }, onError: (error) => { message.error(`删除失败: ${error.message}`); }, });

高级技巧：批量删除功能实现

对于需要同时删除多条数据的场景，可以实现批量删除功能。这需要配合Ant Design表格的选择功能：

// 示例代码位置：src/pages/products/list.tsx const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]); const onSelectChange = (newSelectedRowKeys: React.Key[]) => { setSelectedRowKeys(newSelectedRowKeys); }; const rowSelection = { selectedRowKeys, onChange: onSelectChange, }; const handleBatchDelete = () => { Modal.confirm({ title: "批量删除", content: `确定要删除选中的 ${selectedRowKeys.length} 条记录吗？`, okText: "确认", cancelText: "取消", onOk: () => { selectedRowKeys.forEach((id) => { deleteProduct({ resource: "products", id }); }); setSelectedRowKeys([]); }, }); }; // 在表格上方添加批量删除按钮 <Button danger onClick={handleBatchDelete} disabled={selectedRowKeys.length === 0} > 批量删除 </Button> // 表格组件添加rowSelection属性 <Table rowSelection={rowSelection} // 其他属性... />

常见问题及解决方案

Q: 删除后表格数据没有更新怎么办？

A: 确保在useDelete的onSuccess回调中调用了数据刷新方法，或者检查dataProvider的实现是否正确处理了删除后的缓存更新。

Q: 如何自定义删除确认对话框的样式？

A: Ant Design的Modal.confirm组件支持自定义样式，你可以通过style和className属性进行样式调整，或使用footer属性自定义按钮。

Q: 如何实现删除权限控制？

A: 可以使用Refine的useCan钩子检查用户权限，根据权限决定是否显示删除按钮：

const { data: canDelete } = useCan({ resource: "products", action: "delete", }); // 在删除按钮中使用 {canDelete && ( <Button icon={<DeleteOutlined />} danger onClick={handleDelete}> 删除 </Button> )}