在Admin on Rest中,可以通过使用<FormDataConsumer>
组件来从Create
表单中的另一个组件更改输入值。
<FormDataConsumer>
组件是Admin on Rest提供的一个高阶组件,用于访问表单数据并在表单中进行操作。它接受一个函数作为子组件,并将当前表单数据作为参数传递给该函数。
要从Create
表单中的另一个组件更改输入值,可以在该组件内部使用<FormDataConsumer>
组件,并在其子组件函数中进行相应的操作。以下是一个示例:
import React from 'react';
import { Create, TextInput, FormDataConsumer } from 'react-admin';
const MyCustomComponent = () => (
<FormDataConsumer>
{({ formData, ...rest }) => (
<TextInput
source="myInput"
label="My Input"
value={formData.anotherInput}
onChange={(event) => {
// 在这里可以根据需要更改输入值
rest.updateFormData({ ...formData, myInput: event.target.value });
}}
/>
)}
</FormDataConsumer>
);
const MyCreate = (props) => (
<Create {...props}>
<MyCustomComponent />
</Create>
);
export default MyCreate;
在上面的示例中,MyCustomComponent
是一个自定义的组件,它使用<FormDataConsumer>
来访问表单数据。通过formData
参数,我们可以获取到Create
表单中的所有输入值。在TextInput
组件中,我们将formData.anotherInput
作为value
属性的值,这样可以将另一个输入组件的值赋给当前组件的输入值。
在onChange
事件处理程序中,我们可以根据需要更改输入值。在这个例子中,我们使用rest.updateFormData
方法来更新表单数据,并将新的输入值传递给myInput
字段。
通过这种方式,我们可以从Create
表单中的另一个组件更改Admin on Rest中的输入值。请注意,这只是一个示例,你可以根据实际需求进行相应的修改和调整。
关于Admin on Rest的更多信息和使用方法,你可以参考腾讯云的产品文档:Admin on Rest产品介绍
云+社区技术沙龙[第7期]
北极星训练营
云+社区技术沙龙[第22期]
云+社区开发者大会 长沙站
云+社区技术沙龙[第6期]
云+社区技术沙龙[第8期]
腾讯云GAME-TECH游戏开发者技术沙龙
云+社区技术沙龙第33期
领取专属 10元无门槛券
手把手带您无忧上云