admin-on-rest：自定义编辑组件

Question

我需要通过两种方式自定义 Edit 组件：

添加自定义按钮，但不添加到上面板（使用 'List' 和 'Refresh' 按钮），但在组件的底部（在默认 'Save' 旁边按钮）。
默认关闭重定向 'Save' 按钮点击（让它只是保存并留在页面上）。

我该如何实现？

Answer 1

我遇到了这个悬而未决的问题。由于我最近自己刚刚做了这样的事情，所以我将在这里分享我是如何做到的。我正在使用 admin on rest 1.4.0 btw。

因此，在您的 <Edit> 组件上，添加此 toolbar={<MyCustomToolbar />}。然后创建一个自定义工具栏，其中包含您的按钮。在按钮上，您可以使用 redirect 重定向到另一个页面。

代码示例：

import { SaveButton, Toolbar, TextInput, Edit, SimpleForm  } from 'admin-on-rest';

const MyToolbar = props => 
 <Toolbar {...props} >
   <SaveButton label="Save & to dashboard" redirect="/" />
   .. more buttons here..
 </Toolbar>;


export const EditForm = (props) => (
<Edit title="Edit" {...props}>
    <SimpleForm toolbar={<MyToolbar />}>
        <TextInput source="company_website" type="url" />
        <TextInput source="address_street" />
        <TextInput source="address_zip" />
        <TextInput source="address_unitnr" />
        <TextInput source="address_city" />
    </SimpleForm>
</Edit>
);

希望对您有所帮助！

admin-on-rest：自定义编辑组件

admin-on-rest: customizing Edit component

reactjs

admin-on-rest