ant design form表单动态增减表单项Form.List选中Select值后更新相关联Select选项。代码中地市联动获取区县数据:
html
<Form name="dynamic_form_nest_item" onFinish={onFinish} autoComplete="off" form={form} initialValues={{ list: [{}] }} >
<Form.List name="list">
{(fields, { add, remove }) => (
<>
{fields.map(({ key, name, ...restField }, index) => (
<Row
key={key}
gutter={8}
>
<Col span={3}>
<Form.Item
{...restField}
name={[name, 'area']}
rules={[
{
required: true,
message: '请选择地市',
},
]}
>
<Select
labelInValue
options={areaList}
placeholder="请选择地市"
/>
</Form.Item>
</Col>
<Col span={4}>
<Form.Item
noStyle={true}
shouldUpdate={true} // 当 shouldUpdate 为 true 时,Form 的任意变化都会使该 Form.Item 重新渲染
>
{() => (
<Form.Item
{...restField}
name={[name, 'city']}
rules={[
{
required: true,
message: '请选择区县',
},
]}
>
<Select
labelInValue
options={ // 这里是获取city数据的关键
cityObj?.[ // cityObj是某个地市下city数据的集合 数据类型是对象{地市ID:[]}
form.getFieldValue([
'list',
name,
'area'
])?.value // 由于Select使用了labelInValue属性,所以这里取value即地市ID
] || []
}
placeholder="请选择区县"
/>
</Form.Item>
)}
</Form.Item>
</Col>
<Col span={1} style={{ textAlign: 'center' }}>
<MinusCircleOutlined onClick={() => remove(name)} />
</Col>
</Row>
))}
<Form.Item >
<Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>
新增
</Button>
</Form.Item>
</>
)}
</Form.List>
<Form.Item style={{ textAlign: 'center' }}>
<Button type="primary" htmlType="submit">
提交
</Button>
</Form.Item>
</Form>