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 来处理表单。
因此,所有用户输入都直接发送到 redux 状态。您必须创建一个自定义 Redux 表单,该表单从状态中获取数据并使用初始数据填充表单。查看底部有关在 AOR 中创建自定义表单的答案。
kunal pareek
2018-06-01
请注意,他们已经实现了克隆 按钮 。
Santa Clauze
2018-07-27