admin-on-rest:自定义编辑组件
admin-on-rest: customizing Edit component
我需要通过两种方式自定义 Edit
组件:
- 添加自定义按钮,但不添加到上面板(使用 'List' 和
'Refresh' 按钮),但在组件的底部(在默认 'Save' 旁边
按钮)。
- 默认关闭重定向 'Save' 按钮点击(让它只是
保存并留在页面上)。
我该如何实现?
我遇到了这个悬而未决的问题。由于我最近自己刚刚做了这样的事情,所以我将在这里分享我是如何做到的。我正在使用 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>
);
希望对您有所帮助!
我需要通过两种方式自定义 Edit
组件:
- 添加自定义按钮,但不添加到上面板(使用 'List' 和 'Refresh' 按钮),但在组件的底部(在默认 'Save' 旁边 按钮)。
- 默认关闭重定向 'Save' 按钮点击(让它只是 保存并留在页面上)。
我该如何实现?
我遇到了这个悬而未决的问题。由于我最近自己刚刚做了这样的事情,所以我将在这里分享我是如何做到的。我正在使用 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>
);
希望对您有所帮助!