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

普尔克萨

这里阅读官方文档后,我遇到了这些陈述

...该<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] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

清除无状态React组件中的输入

输入受控的无状态React组件

如何在React Native中将函数和数据从组件类传递到无状态类?

如何在无状态React组件中单击按钮时获取输入的值?

添加输入字段onClick无状态组件React Electron

如何在React中将数据从无状态子组件发送到无状态父组件?

如何在React中附加到无状态组件的ref?

如何在Typescript中编写React无状态功能组件?

如何在ReactJS无状态组件中使用纯JavaScript填充输入值?

如何在ConstraintLayout的文本视图中将视图绑定到多行文本的末尾?

如何在React Admin的列表视图中禁用删除操作?

如何在 React Native 的视图中将图像居中

在 React-admin 列表视图中使用输入

如何在 react-native 中将状态从组件传递到主屏幕

如何将一个视图中的输入变量集用作其他视图(模板)中的变量?角度的

如何在React组件中定义状态?

如何在React中编辑多个输入控制的组件?

如何在视图中将字符串绑定到作用域var?

如何在对象页面布局的块视图中将 oData 模型绑定到表?

如何在React Native的无状态功能组件中扩展Native组件的props TypeScript接口?

如何使用React Admin在Show视图中的对话框上添加表单输入?

如何在OpenERP7表单视图中将字段移动到其他位置?

如何在React中编辑输入?

如何在 React 中的函数中进行其他操作后清理输入字段?

如何在React中的无状态组件中处理鼠标事件

如何在React中的无状态函数组件中初始化类实例?

我该如何在React中使用Typescript声明无状态功能组件?

如何在TypeScript中使用带有React无状态功能组件的子级?

如何在无状态的条件外部React组件中返回pass和返回变量?