Question

我想创建一个克隆＆＃39;来自react-admin的按钮，它允许我将现有数据记录克隆/复制到另一个数据记录中，并打开一种编辑表单来编辑它们并创建一个新条目。我该怎么办？

P.S我正在使用Typescript

目前我的代码是这样的

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

克隆按钮的功能应该是编辑（因为它需要先前的值）或者像创建（因为我想创建新的）

Create Component看起来像这样 `

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

`

Answer 1

这听起来完全有可能。但是，它需要你很好地理解RA内部和redux形式。

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

2）编写一个redux连接的Form组件（你可能必须编写一个自定义的ReduxForm组件，但你可以先使用RA SimpleForm组件开始工作）然后使用MapStateToProps函数将数据导入组件。如果RA在重定向到“创建”页面时未清除redux状态，则此方法将起作用。你将不得不调查这一点。

好的..这就是你要为标准的创建路线做的事情。你想要做的是'自定义行为'。在引擎盖下，Create组件使用Redux Form来处理表单。

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

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

How to richly style AOR Edit page

Answer 2

请注意，他们已经实现了克隆button。

react-admin中的自定义按钮

2 个答案: