使用对象的属性作为TextInput的源

Question

我有我的对象，该对象存储在变量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变量进行操作，该变量及其所有属性都存在。所以我真的很困惑，为什么我不能打印这些值以形成表格。

有什么办法解决这个问题吗？

谢谢。

Answer 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。这样，您应该将值输入到输入中。