reactjs - react 管理中的自定义按钮

Question

我想从 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>
);

`

Answer 1

这听起来完全有可能。然而，它需要您很好地理解 RA 内部结构和 redux 形式。

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

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

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

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

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

How to richly style AOR Edit page