在这里阅读官方文档后,我遇到了这些陈述
...该
<Field>
组件可以通过其上下文访问当前记录。名称prop用作记录属性的选择器以进行编辑。
然后,我尝试通过此实验弄清楚这些语句:
const CustomInput1 = () => (
<span>
<Field name="title" component="input" />
</span>
);
export const PostCreate = (props) => (
<Create {...props}>
<SimpleForm>
<TextInput source="title" />
<CustomInput1/>
</SimpleForm>
</Create>
);
事实证明,Field的propname
和TextInput的propsource
是绑定在一起的,从某种意义上说,每当我对一个输入进行任何更改时,另一个输入的值也会相应地更改。
我的问题是。为什么不能通过使用像这样的无状态组件来再现相同的效果?
const CustomInput2 = ({ record, source }) => (
<input type="text" value={record[source]}/>;
);
export const PostCreate = (props) => (
<Create {...props}>
<SimpleForm>
<TextInput source="title" />
<CustomInput2 source="title"/>
</SimpleForm>
</Create>
);
据我了解,后一种情况的两个输入都绑定到record['title']
同一record
对象,不是吗?
我这样做的实际原因是,我想基于一个输入的更新来更改所有其他输入的值。我天真的理解是这可以通过共享来实现record
。
因此将无法正常工作,使用FormDataConsumer解决您的问题:
https://marmelab.com/react-admin/Inputs.html#linking-two-inputs
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句