admin:自定义编辑组件

Question

我需要用两种方式定制Edit组件：

• 添加自定义按钮，但不添加到上面板(带有“列表”和“刷新”按钮)，而是在组件的底部(在默认的“保存”按钮旁边)。
• 关闭默认的“保存”按钮上的重定向按钮(使其只保存并停留在页面上)。

我怎样才能做到这一点？

Answer 1

我想到了这个未回答的问题。因为我最近也做过类似的事情，所以我会在这里分享一下我是如何做到的。我在rest 1.4.0点上使用admin。

因此，在您的<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>
);

希望这能有所帮助！