时间戳

首页 > 解决方案 > 选项卡形式的动态输入字段

react-admin - 选项卡形式的动态输入字段

问题描述

我正在使用来自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'
}

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

<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>

标签： react-admin

解决方案

不确定如何向 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>

推荐阅读