选项卡形式的动态输入字段答案

【问题标题】：Dynamic Input Field in Tabbed Form选项卡形式的动态输入字段
【发布时间】：2019-08-27 06:45:46
【问题描述】：

我正在使用来自https://marmelab.com 的 react-admin 模块并使用了他们的“编辑”组件。所以“编辑”组件正在调用一个后端 api，它将获取记录数据。我的 JSON 数据是：

{
  id: '1',
  szName: 'Very First',
  iCNBPrice: '60',
  iBEPrice: '215',
  iEmailPrice: '555',
  iMaxConvert: '0',
  iConvertFee: '0',
  iServiceCharge: '0',
  iInvoiceEOM: [ 1 ],
  iInvoiceDate: [ 1 ],
  iInvoicePropertySold: [ 0 ],
  iInvoiceRecurring: [ 0 ],
  iDiscountAfterMagazine: '0',
  iMagazineDiscountPeriod: '0',
  iActive: '2',
  iDeleted: '0',
  dtDeleted: '0000-00-00 00:00:00',
  iDeletedBy: '0',
  iCreatedBy: '1',
  dtCreated: '2019-08-07 00:00:00',
  iUpdatedBy: '99',
  dtUpdated: '2019-08-21 17:35:34',
  price_product: [
    { szType: 'Tilstandsrapport', iPrice: '100' },
    { szType: 'Elinstallationsrapport', iPrice: '20' },
    { szType: 'Energimærket', iPrice: '30' },
    { szType: 'Kladde', iPrice: '40' },
    { szType: 'Inspiire', iPrice: '50' }
  ],
  Nemforsikring: '5',
  FRIDA: '5',
  'Willis/DBF': '5'
}

我想使用“SimpleFormIterator”组件制作price_product 字段，但无法获得正确的源名称和字段标签？

<ArrayInput source="price_product" label="" className="price_feild">
                    <SimpleFormIterator disableRemove disableAdd >
                    <NumberInput  source={source.szType} validate={required()} style={{ display: 'inline', float: 'left', marginLeft: '20px' }}/>
                    </SimpleFormIterator>
                </ArrayInput>

【问题讨论】：

您的问题有点难以解析，所以我可能会误解您想要实现的目标，但是：您是否尝试过在 NumberInput 中仅使用 source="szType"？
在 NumberInput 中，我希望我的来源中有 price_product[iPrice]，我的标签中有 price_product[szType]。在源代码中，价格即将到来（是的，我将更改 source="iPrice"）。但我无法动态获取标签 price_product[szType] 标签是否接受函数或我如何实现这一点？请帮助并提前感谢您的回答。
哦，我想现在我明白你想要完成什么了。这可能不适用于 react-admin 中的预定义输入组件，您将需要一些自定义元素。类似于自定义 FormIterator 的东西，它从 szType 字段中获取标签，并将其提供给每个数组条目的 NumberInput。
刚刚意识到FormDataConsumer也可能对您有所帮助；请参阅输入组件文档的Linking Two Inputs 部分中的示例。

标签： react-admin

【解决方案1】：

不确定如何向 NumberInput 添加动态标签，但另一种解决方案是添加额外的（禁用的）输入并以这种方式显示类型。

<ArrayInput source="price_product" label="" className="price_feild" >
  <SimpleFormIterator disableRemove disableAdd >
    <DisabledInput
      label='Product Type'
      source='szType'
    />
    <NumberInput
      label='Product Price'
      source='iPrice'
      validate={required()}
      style={{ display: 'inline', float: 'left', marginLeft: '20px' }}
    />
  </SimpleFormIterator>
</ArrayInput>

【讨论】：

感谢您的回答，但这对我不起作用，因为这将创建两个单独的字段并且我的要求不同。我需要为每个 price_product 数组而不是单独的字段添加一个动态标签。