3

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

PS我正在使用打字稿

目前我的代码是这样的

<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>
);

`

4

2 回答 2

2

这听起来完全有可能。但是，它需要您非常了解 RA 内部结构和 redux 形式。

你有 2 种策略。1) 编写带有克隆按钮的自定义操作，该操作将调用 API 并重定向到创建页面。当用户点击克隆按钮时，API 响应应该被引导以填充具有所选记录的状态中的“表单”键（这是存储表单数据的 redux 状态中的键）

2) 编写一个 redux 连接的 Form 组件（您可能必须编写一个自定义 ReduxForm 组件，但您可以从使用 RA SimpleForm 组件开始，也许它会起作用），然后使用 MapStateToProps 函数将数据获取到您的组件中。如果 RA 在重定向到 Create 页面时没有清除 redux 状态，这将起作用。您将不得不对此进行调查。

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

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

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

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

于 2018-06-01T05:39:53.137 回答
2

如您所知，他们已经实现了克隆按钮。

于 2018-07-27T02:19:16.740 回答