ant design form表单动态增减表单项Form.List选中Select值后更新相关联Select选项。代码中地市联动获取区县数据:
<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) => (<Rowkey={key}gutter={8}><Col span={3}><Form.Item{...restField}name={[name, 'area']}rules={[{required: true,message: '请选择地市',},]}><SelectlabelInValueoptions={areaList}placeholder="请选择地市"/></Form.Item></Col><Col span={4}><Form.ItemnoStyle={true}shouldUpdate={true} // 当 shouldUpdate 为 true 时,Form 的任意变化都会使该 Form.Item 重新渲染>{() => (<Form.Item{...restField}name={[name, 'city']}rules={[{required: true,message: '请选择区县',},]}><SelectlabelInValueoptions={ // 这里是获取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>