如何在 react-admin 的视图中将无状态组件输入绑定到其他输入

Question

阅读官方文档here后，我遇到了这些陈述

...the <Field> component can access the current record via its context. The name prop serves as a selector for the record property to edit.

然后，我试着通过这个实验来理解陈述：

const CustomInput1 = () => (
     <span>
         <Field name="title" component="input" />
     </span>
);

export const PostCreate = (props) => (
    <Create {...props}>
        <SimpleForm>
            <TextInput source="title" />
            <CustomInput1/>
        </SimpleForm>
    </Create>
);

事实证明，Field 的属性 name 和 TextInput 的属性 source 是绑定在一起的，也就是说，每当我对一个输入进行任何更改时，另一个输入的值也会相应地更改。

我的问题是。为什么使用这样的无状态组件无法重现相同的效果？

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.

来实现

Answer 1

这样不行，要解决您的问题，请使用 FormDataConsumer:

https://marmelab.com/react-admin/Inputs.html#linking-two-inputs

如何在 react-admin 的视图中将无状态组件输入绑定到其他输入

How to bind a Stateless Component Input to other Inputs in react-admin's views

bind

input

stateless

reactjs

react-admin