在 ArrayInput/SimpleFormIterator 内使用 ReferenceField答案

【问题标题】：Use a ReferenceField inside of an ArrayInput/SimpleFormIterator在 ArrayInput/SimpleFormIterator 内使用 ReferenceField
【发布时间】：2020-05-07 17:07:19
【问题描述】：

正如标题所说。我需要在 ArrayInput/SimpleFormIterator 中使用 ReferenceField。我不断收到以下错误：

TypeError: Cannot read property 'replace' of undefined

版本：

react-admin: 3.2.3
react: 16.12.0

这是一个sn-p的代码：

<ArrayInput source="specialties" label="">
  <SimpleFormIterator disableAdd>
    <ReferenceField label="Specialties Link" source="ID" reference="specialty" link="show" >
      <TextField source="ID" />
    </ReferenceField>
    <TextInput source="vendorSpecialtyText" label="Vendor Specialty Text" />
  </SimpleFormIterator>
</ArrayInput>

有一个叫做specialty的资源，它在应用程序其他部分的ArrayField中工作，如下所示：

<ArrayField source="specialties" label=" Specialties">
  <SingleFieldList>
    <ReferenceField label="Specialties Link" source="ID" reference="specialty" link="show" >
      <TextField source="ID" />
    </ReferenceField>
  </SingleFieldList>
</ArrayField>

不确定这是否在此框架内是不可能的，或者我是否执行错误。如果有办法解决这个问题或有不同的想法，请告诉我！谢谢。

【问题讨论】：

标签： react-admin

【解决方案1】：

From the documentation：

注意： SimpleFormIterator 仅接受 Input 组件作为子组件。如果你想使用一些Fields 来代替，你必须使用<FormDataConsumer> 来获得正确的来源，..."

import { ArrayInput, SimpleFormIterator, DateInput, TextInput, FormDataConsumer } from 'react-admin';

<ArrayInput source="backlinks">
    <SimpleFormIterator disableRemove >
        <DateInput source="date" />
        <FormDataConsumer>
            {({ getSource, scopedFormData }) => {
                return (
                    <TextField
                        source={getSource('url')}
                        record={scopedFormData}
                    />
                );
            }}
        </FormDataConsumer>
    </SimpleFormIterator>
</ArrayInput>

或包含输入字段

<ArrayInput source="specialties" label="">
  <SimpleFormIterator disableAdd>
    <ReferenceInput label="Specialties Link" source="ID" reference="specialty">
      <SelectInput optionText="{Your description field}"  />
    </ReferenceInput>
    <TextInput source="vendorSpecialtyText" label="Vendor Specialty Text" />
  </SimpleFormIterator>
</ArrayInput>

【讨论】：