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

时间:2019-08-27 06:45:46

标签: 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'
}

我想使用“ 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>

1 个答案:

答案 0 :(得分:0)

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