antd 动态添加表单_使用antd的Form组件动态创建复杂Select表单

image.png

image.png

最近在项目中需要开发这样一个动态的select组件功能，梳理一下需求：

1.左侧的select和右侧的select是一个联动效果，右侧的select有几个option取决于选择了左侧的某个option

2.左侧的select有几个option取决于后台接口返回的数据

3.当页面加载时，会去接口中读取已有的变量和成员表单，一行的变量和成员可以看做一个整体

4.页面的表单可以用户手动增删

在开发过程的遇到的问题和解决方案记录：

1.动态增删表单

原理是使用getFieldValue方法和setFieldsValue方法，通过增加keys数组成员和删除keys数组成员来达到增删表单的效果。

removeFormItem = (k) => {

const { form } = this.props;

const keys = form.getFieldValue('keys');

form.setFieldsValue({

keys: keys.filter(key => key !== k),

});

}

addFormItem = () => {

const { form } = this.props;

let keys = form.getFieldValue('keys&