数据的结构是这样的,需要用这个生成一个如下的表单
{
name: '', // 名称
groups: [ // 组
{
groupName: '', // 组名
state: 1, // 是否启用 1 启用 0 禁用
isOpen: 1, // 是否展开 1 展开 0 收起
fields: [ // 字段
{
fieldNameCn: '', // 字段中文名
tableName: '', // 表名
fieldName: '', // 字段在表中的名字
state: 1 // 是否启用 1 启用 0 禁用
}
]
}
]
}
点击新增组按钮,给groups增加一条数据,点新增字段给groups[x].fields增加一条数据,删除的话反过来
现在循环出初始的表单,没问题,使用类似下面的方法来注册一个antd的field
{getFieldDecorator(`groups[${index}].groupName`, {})()}
现在点击新增的时候,使用下面的方法设置field会报You cannot set field before registering it.,因为我没有注册groups[1].groupName,因为是新增的,我不可能render遍历的时候就给它注册掉啊
appGroup = () = > {
const { form } = this.props;
const groups = form.getFieldValue('groups');
const group_empty = this.data_form_empty.groups[0]; // 这个不用管,就是个初始的对象
const key = `groups[${groups.length}]`
form.setFieldsValue({ // 这里就会报错 You cannot set field before registering it.
[key]: group_empty
});
}
也尝试过直接用getFieldDecorator注册一个groups,然后直接setFieldsValue整个groups。但是由于结构比较复杂,所以还会在getFieldDecorator的时候注册类似于groups[${index}].groupName这样的,这样就会报Warning: One field name cannot be part of another, e.g. a and a.b.