开发者问题收集

react-admin 中的自定义按钮

2018-05-31
11552

我想从 react-admin 创建一个“克隆”按钮,它将允许我将现有数据记录克隆/复制到另一个数据记录中,并打开一种编辑表单来编辑它们并创建新条目。我该怎么做?

P.S 我正在使用 Typescript

目前我的代码是这样的

<Datagrid rowStyle={modelRowStyle}> 
   <TextField source="format" /> 
   <TextField source="status" /> 
   <EditButton basePath="/models" /> 
   <DeleteButton basePath="/models" /> 
   <CloneButton /> 
</Datagrid> 

克隆按钮的功能应该是什么,它应该像编辑(因为它将采用以前的值)还是像创建(因为我想创建新的)

创建组件看起来像这样 `

export const ModelCreate = (props: object) => (
    <Create title="Create a Model" {...props}>
        <SimpleForm toolbar={<ModelCreateToolbar />}>
            <TextInput source="name" label="Name" autoWidth={true} /> 
            <TextInput source="version" label="Version" />
            <SelectInput source="format" label="Format" choices={Format} optionText="name" optionValue="format" />
            <SelectInput source="group" label="Group" choices={Group} optionText="name" optionValue="group" /> 
        </SimpleForm>
    </Create>
);

`

2个回答

这听起来完全有可能。但是,这需要您非常了解 RA 内部结构和 redux 表单。

您有 2 个策略。 1) 编写带有 Clone 按钮的自定义操作,该操作将调用 API 并重定向到创建页面。当用户点击克隆按钮时,API 响应应定向到使用所选记录填充“表单”键(这是 redux 状态中存储表单数据的键)

2) 编写一个 redux 连接的表单组件(您可能必须编写一个自定义 ReduxForm 组件,但您可以从使用 RA SimpleForm 组件开始,也许它会起作用),然后使用 MapStateToProps 函数将数据放入您的组件中。如果 RA 在重定向到创建页面时没有清除 redux 状态,这将起作用。您必须调查这一点。

好的。。这就是您对标准创建路线所做的。您想要做的是“自定义行为”。在底层,Create 组件使用 Redux Form 来处理表单。

https://redux-form.com/7.3.0/

因此,所有用户输入都直接发送到 redux 状态。您必须创建一个自定义 Redux 表单,该表单从状态中获取数据并使用初始数据填充表单。查看底部有关在 AOR 中创建自定义表单的答案。

如何丰富 AOR 编辑页面的样式

kunal pareek
2018-06-01

请注意,他们已经实现了克隆 按钮

Santa Clauze
2018-07-27