使用对象的属性作为 TextInput 的来源答案

【问题标题】：Use attribute of object as a source of TextInput使用对象的属性作为 TextInput 的来源
【发布时间】：2019-10-07 13:32:53
【问题描述】：

我有我的对象，它存储在变量entityData 中。我想将属性的当前值从我的对象打印到<SimpleForm>。我认为这很简单，但由于某种原因，这些值不会打印。我的对象如下所示：

我已经尝试过这段代码：

const entityData = this.state.entityData;
return (
<SimpleForm
    form="post-quick-create"
    resource={this.props.resource}
    toolbar={null}
 >
    <TextInput source={entityData.bgColor} label="Background Color" />
    <TextInput source={entityData.caption} label="Caption" />
    <BooleanInput source={entityData.enabled} label="Enabled" />
    <TextInput source={entityData.image} label="Image" />
    <TextInput source={entityData.name} label="Image" />
    <TextInput source={entityData.textColor} label="Text Color" />
    <TextInput source={entityData.type} label="Type" />
    <SaveButton saving={isSubmitting} onClick={this.handleSaveClick}/>
</SimpleForm>

);

我尝试console.log 表单中的entityData 变量，它存在以及它的所有属性。所以我真的很困惑，为什么我不能将这些值打印出来。

知道如何解决这个问题吗？

提前谢谢你。

【问题讨论】：

你的TextInput的代码怎么样？还是来自库的现成组件？
@RicardoGonzalez 它是一个已经内置的组件，更多在这里：marmelab.com/react-admin/Inputs.html#textinput

标签： javascript reactjs forms react-admin

【解决方案1】：

您需要将原来的record 替换为{...this.props} 为您的州设置的。虽然我不推荐这样做，因为它可能会在以后导致一些粗略的行为。 source 也需要是一个字符串，而不是你的例子中的值。

<SimpleForm {...this.props} record={this.state}>
   <TextInput source='entityData.bgColor' label="Background Color" />
   <TextInput source='entityData.caption' label="Caption" />
   <BooleanInput source='entityData.enabled' label="Enabled" />
   <TextInput source='entityData.image' label="Image" />
   <TextInput source='entityData.name' label="Name" />
   <TextInput source='entityData.textColor' label="Text Color" />
   <TextInput source='entityData.type' label="Type" />
</SimpleForm>

注意我如何将record 设置为this.state。这样你就应该得到输入的值。

【讨论】：