javascript - 使用对象的属性作为 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

您需要用 {...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。这样您应该可以获取输入的值。