[英]Cutomize Delete button react-admin
Is there any way to customise DeleteButton
button in react-admin
to add a confirmation message like 'Do you want to delete item?'.有没有办法在react-admin
自定义DeleteButton
按钮以添加确认消息,例如“您想删除项目吗?”。 Currently on clicking on DeleteButton
it directly deletes the item without asking for a confirmation.目前点击DeleteButton
直接删除项目而不要求确认。 I tried adding title
attribute to delete button but it does not get fired.我尝试将title
属性添加到删除按钮,但它没有被触发。 Here is my code这是我的代码
//This worked with admin-on-rest, but not working with react-admin
const CategoryDeleteTitle = translate(({ record, translate }) => <span>
{translate('Delete')}
{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>
);
We now handle deletions in an optimistic way, providing an undo mechanism instead of a confirmation dialog.我们现在以乐观的方式处理删除,提供撤消机制而不是确认对话框。
If this doesn't suit you, you can follow the UPGRADE GUIDE which leads to this page of the documentation: https://marmelab.com/react-admin/CreateEdit.html#actions如果这不适合您,您可以按照导致此文档页面的升级指南进行操作: https : //marmelab.com/react-admin/CreateEdit.html#actions
Note that you'll have to create and handle your confirmation dialog using something like react-modals
and dispatch the DELETE
action yourself.请注意,您必须使用react-modals
类的东西创建和处理确认对话框,并自己调度DELETE
操作。
You can use this gist with custom actions like:您可以将此要点与自定义操作一起使用,例如:
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>
);
在 react-admin v3 中,现在有一个 DeleteWithConfirmButton :-)
According to the documentation "https://marmelab.com/react-admin/CreateEdit.html" create:根据文档“https://marmelab.com/react-admin/CreateEdit.html”创建:
const CustomToolbar = props => (
<Toolbar {...props} classes={useStyles()}>
<SaveButton />
<DeleteButton undoable={false} />
</Toolbar>
);
import from react-admin button you need like this:从你需要的 react-admin 按钮导入:
import {
Toolbar,
SaveButton,
DeleteWithConfirmButton
} from 'react-admin';
see all available names here https://github.com/marmelab/react-admin/tree/master/packages/ra-ui-materialui/src/button , and change DeleteButton on ImportedButton like this:在此处查看所有可用名称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>
);
And change in the code, where you need <SimpleForm toolbar={<CustomToolbar />}>
.并更改代码,您需要<SimpleForm toolbar={<CustomToolbar />}>
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.