Question

有没有办法在DeleteButton中自定义react-admin按钮来添加确认消息，例如“您要删除项目吗？”。目前点击DeleteButton时，它会直接删除该项目，而不会要求确认。我尝试将title属性添加到删除按钮但不会被触发。这是我的代码

//This worked with admin-on-rest, but not working with react-admin
const CategoryDeleteTitle = translate(({ record, translate }) => <span>
        {translate('Delete')}&nbsp;
        {record && `${record.code} ${record.name}`}
    </span>);

const EditActions = ({ basePath, data, resource }) => (
    <CardActions>
        <ShowButton basePath={basePath} record={data} />
        <ListButton basePath={basePath} />
        <DeleteButton title={<CategoryTitle />} basePath={basePath} record={data} resource={resource} />

    </CardActions>
);

export const CategoryEdit = (props) => (
    <Edit actions={<EditActions />} title={<CategoryTitle />} {...props}>
        <SimpleForm>
            <DisabledInput source="id" />
            <TextInput source="name" />
        </SimpleForm>
    </Edit>
);

Answer 1

您可以将此gist用于自定义操作，例如：

const UserEditActions = ({ basePath, data, resource }) => (
    <CardActions>
        <ListButton basePath={basePath} />
        <DeleteButtonWithConfirmation basePath={basePath} record={data} resource={resource} undoable={false} />
        <RefreshButton />
      </CardActions>
    );

export const UserEdit = ({ ...props }) => (
  <Edit {...props} actions={<UserEditActions />} >
    <CreateEditForm title={<EntityTitle label="User" />} />
  </Edit>
);

Answer 2

我们现在以乐观的方式处理删除，提供撤消机制而不是确认对话框。

如果这不适合您，您可以按照导致此文档页面的UPGRADE GUIDE：https://marmelab.com/react-admin/CreateEdit.html#actions

请注意，您必须使用react-modals之类的内容创建和处理确认对话框，并自行发送DELETE操作。

Answer 3

在react-admin v3中，现在有一个DeleteWithConfirmButton：-）

Answer 4

根据文档“ https://marmelab.com/react-admin/CreateEdit.html”创建：

const CustomToolbar = props => (
    <Toolbar {...props} classes={useStyles()}>
        <SaveButton />
        <DeleteButton undoable={false} />
    </Toolbar>
);

从反应管理按钮导入，您需要像这样：

import {
    Toolbar,
    SaveButton,
    DeleteWithConfirmButton
} from 'react-admin';

在https://github.com/marmelab/react-admin/tree/master/packages/ra-ui-materialui/src/button处查看所有可用的名称，并像这样更改ImportedButton上的DeleteButton：

 export const CustomToolbar = props => (
    <Toolbar {...props} classes={useStyles()}>
        <SaveButton/>
        <DeleteWithConfirmButton/>
    </Toolbar>
);

并在需要<SimpleForm toolbar={<CustomToolbar />}>的地方更改代码。

Cutomize删除按钮react-admin

4 个答案: