使用对象的属性作为 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 的。这样你应该得到输入的值。

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

Use attribute of object as a source of TextInput

javascript

forms

reactjs

react-admin