如何在react-admin中自定义DeleteButton添加删除确认提示？

没问题！在react-admin里给DeleteButton添加删除确认提示是完全可行的，而且官方已经提供了非常便捷的方式，不用自己折腾复杂的模态框逻辑。我来给你讲两种常用的实现方法：

方法一：使用内置确认属性（最简单） #

react-admin的<DeleteButton>组件已经内置了确认对话框功能，你只需要通过confirmTitle和confirmContent这两个props就能自定义提示内容，完全不需要额外封装组件：

import { DeleteButton } from 'react-admin';

// 在你的列表/详情页面中使用
<DeleteButton
    confirmTitle="确认删除"
    confirmContent="是否要删除该项目？"
/>

如果需要根据当前要删除的记录动态显示提示（比如显示项目名称），可以给confirmContent传入一个函数：

<DeleteButton
    confirmTitle="确认删除分类"
    // 这里的record就是当前要删除的那条数据
    confirmContent={(record) => `是否要删除分类「${record.name}」？`}
/>

方法二：完全自定义删除按钮（适合复杂需求） #

如果内置的确认框样式或逻辑满足不了你的需求，比如要自定义按钮外观、添加额外的确认条件，你可以用react-admin提供的useDelete和useConfirm hook来封装自己的删除按钮：

import { useDelete, useConfirm, Button } from 'react-admin';
import DeleteIcon from '@mui/icons-material/Delete';

// 自定义删除按钮组件
const CustomDeleteButton = ({ record, resource }) => {
    // useDelete hook用于发起删除请求
    const deleteMutation = useDelete(resource, { id: record.id });
    // useConfirm hook用于唤起确认对话框
    const confirm = useConfirm();

    const handleDelete = () => {
        // 弹出确认框，参数分别是：标题、内容、确认按钮文字、取消按钮文字、确认后的回调
        confirm(
            '确认删除',
            '是否要删除该项目？',
            '删除',
            '取消',
            () => {
                // 用户确认后执行删除操作
                deleteMutation.mutate();
            }
        );
    };

    return (
        <Button
            onClick={handleDelete}
            startIcon={<DeleteIcon />}
            color="error"
            variant="outlined"
        >
            删除
        </Button>
    );
};

// 在你的页面中使用自定义按钮
<CustomDeleteButton record={record} resource="categories" />

为什么旧的admin-on-rest代码失效了？ #

你提到之前在admin-on-rest里用title属性的代码现在不行了，这是因为react-admin作为admin-on-rest的继任者，调整了API设计——原来的title属性被替换成了专门的confirmTitle和confirmContent，所以旧代码自然无法生效啦。

内容的提问来源于stack exchange，提问作者Chetan Gawai