在Form.List中，动态新增多个由Space包裹的Form.Item,样例如下:
const areas = [
{
label: 'Beijing',
value: 'Beijing',
},
{
label: 'Shanghai',
value: 'Shanghai',
},
];
const sights = {
Beijing: ['Tiananmen', 'Great Wall'],
Shanghai: ['Oriental Pearl', 'The Bund'],
};
<Form.List name="sights">
{(fields, { add, remove }) => (
<>
{fields.map((field) => (
<Space key={field.key} align="baseline">
<Form.Item
noStyle
shouldUpdate={(prevValues, curValues) =>
prevValues.area !== curValues.area || prevValues.sights !== curValues.sights
}
>
{() => (
<Form.Item
{...field}
label="Sight"
name={[field.name, 'sight']}
rules={[
{
required: true,
message: 'Missing sight',
},
]}
>
<Select
disabled={!form.getFieldValue('area')}
style={{
width: 130,
}}
>
{(sights[form.getFieldValue('area')] || []).map((item) => (
<Option key={item} value={item}>
{item}
</Option>
))}
</Select>
</Form.Item>
)}
</Form.Item>
<Form.Item
{...field}
label="Price"
name={[field.name, 'price']}
rules={[
{
required: true,
message: 'Missing price',
},
]}
>
<Input />
</Form.Item>
<MinusCircleOutlined onClick={() => remove(field.name)} />
</Space>
))}
<Form.Item>
<Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>
Add sights
</Button>
</Form.Item>
</>
)}
</Form.List>
需求点： 如示例中： 想根据选择不同type，其他的Form.Item也不同，进行相应切换， 这里的price Form.Item可以换成其他的例如 size Form.Item, price FormItem则不需要；实现代码具体如下:
const typeList = ['A', 'B']
<Form.Item
{...field}
label="Tpye"
name={[field.name, 'type']}
rules={[
{
required: true,
message: 'Missing type',
},
]}
>
<Select
style={{
width: 130,
}}
>
{(typeList .map((item) => (
<Option key={item} value={item}>
{item}
</Option>
))}
</Select>
</Form.Item>
<Form.Item
noStyle
shouldUpdate={(prevValues, curValues) =>
prevValues.sights[index] !== curValues.sights[index]
}
>
{({getFieldValue}) => getFieldValue('sights')[index]&&getFieldValue('sights')[index].type
&&getFieldValue('sights')[index].type === 'A' ? (
<Space>
<Form.Item
{...field}
label="Sight"
name={[field.name, 'sight']}
]}
>
<Select
disabled={!form.getFieldValue('area')}
style={{
width: 130,
}}
>
{(sights[form.getFieldValue('area')] || []).map((item) => (
<Option key={item} value={item}>
{item}
</Option>
))}
</Select>
</Form.Item>
</Space> :
<Form.Item label="Size" name="size">
........
</Form.Item>
)}
</Form.Item>
