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

【问题标题】：admin-on-rest: customizing Edit componentadmin-on-rest：自定义编辑组件
【发布时间】：2017-06-26 15:35:05
【问题描述】：

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

添加自定义按钮，但不添加到上面板（使用“列表”和 “刷新”按钮），但在组件底部（在默认的“保存”旁边按钮）。
在默认的“保存”按钮单击时关闭重定向（使其只是保存并留在页面上）。

我如何做到这一点？

【问题讨论】：

在即将到来的 1.2.0 版本中两者都将很容易实现（请参阅#692 Pull Request 关于该主题：github.com/marmelab/admin-on-rest/pull/692）。同时，您将复制并粘贴当前的 Edit 组件以添加您自己的按钮，并创建自定义 saga 以修改重定向行为。因为比较难做，而且1.2.0也不远了，建议你等一下；）
谢谢，我等1.2.0。
@FrançoisZaninotto 现在 1.2 已经发布，你能提供这个问题的答案吗？我不想创建重复的问题。

标签： reactjs admin-on-rest

【解决方案1】：

我遇到了这个没有答案的问题。因为我最近自己做了这样的事情，所以我将在这里分享我是如何做到的。我在 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>
);

希望这会有所帮助！

【讨论】：