结合Ant Design2.x总结在实际项目开发中遇到的问题

1.Ant Design

1. 介绍

2. 设计价值观
https://ant.design/docs/spec/...

2.使用的问题和解决方法

1. (前言)Form的适用场合
a.校验和提交
b.数据收集/存数据

在没有分步提交的情况下，使用Form是保存页面现有数据最简单最直接的方法 举例：   

在点击保存时调用
form.validateFieldsAndScroll((err, values) => {
    console.log('Received values of form: ', values);
})
看到图片右边Form已经帮我们把值已键值对的形式保存起来了,key是你在使用Form时通过getFieldDecorator
方法与表单进行双向绑定时的参数id,详见ant文档中的Form使用方法

帮我们保存很好,但是当我们点击删除时会不会出现什么问题？ demo

2. 使用Form组件后删除时会出现的问题及解决方法

可以看到直接删除demoData[i] 无论我们删除第几项 表单中的数据始终是“删除”最后一项。
其实表单中的数据并没有被删除 只是没有缺少key去承接最后一个value而已

解决办法有两种：
一种是删除时手动将form中的key也向上移动一位，例如：删除第一项，写一个方法将Flows0_name赋值为2，Flows1_name赋值为3，Flows2_name赋值为4 以此类推...

这种方法只适合“1对1”删除，当删除的对象内部还存在子对象的时候，例如：(看审批流)
第一个流程适用范围有一个流程，第二个流程适用范围有两个流程，即存在Flows0_Items0_name，和Flows1_Items0_name、Flows1_Items1_name时，若想删除第一个流程适用范围(Flows0_Items0_name)如图：

另一种是给数组中的每一项都增加一个flow_flag作为这一项的唯一id,例如：在点击add时，向数组中push一条初始数据时同时将flow_flag push进去，

这种方法“1对1”“1对n”删都可以
注意！ <Children {...flowsProps} key={index} {...this.props} /> 的key务必要改成 item.flow_flag

3. 如何实现一个受控选择的树和遇到的问题及解决方法

项目需要一个这样的树：

每一个树节点都代表的是一个职级，所以子节点全选中不代表父节点选中，父节点选中代表子节点全选中，这个时候Antd中的树组件就不满足我们项目的需求了，但是他为我们提供了一个让树受控的参数treeCheckStrictly，需要注意的是treeCheckStrictly和treeCheckable共同使用时会使得 labelInValue 强制为 true，意思就是不受控时你选中树节点的value是这样的

persons：["id1","id2","id3",...]

受控后

persons:[
    {value: "id1", label: "name1"},
    {value: "id2", label: "name2"},
    ...
]

受控之后会变成点哪个节点选哪个节点的树。
主要需要下面两个方法：

// 获取某个child_list
    getChildList(list,id){
        if(id==0){
            return list
        }else{
            let newList = [];
            for(let i=0;i<list.length;i++){
                if(list[i].id == id){                                           //[1]
                    newList = list[i].child_list; 
                    return newList;
                }else{
                    if(list[i].child_list.length>0){                            //如果有子节点，拿着子节点去执行this.getChildList(list[i].child_list,id)
                        if(this.getChildList(list[i].child_list,id).length > 0){//如果子节点有返回值，即this.getChildList(list[i].child_list,id)这个方法有返回值（满足[1]），就return
                            return this.getChildList(list[i].child_list,id);
                        };
                    }
                } 
            }
            return newList;
        }
    }

    // 获取某个child_list的所有下一级({value:,label:})
    getNewCheckNodes(newList){
        let ids = [];
        newList.map( item =>{
            ids.push({"value":item.id,"label":item.name});
            if(item.child_list.length!==0){
                this.getNewCheckNodes(item.child_list);
                ids = ids.concat(this.getNewCheckNodes(item.child_list));
            }
        })
        return ids;
    }

思路：在onSelect时可以拿到当前勾选（或取消勾选的value），如果value.value等于根节点id，直接将根节点的child_list作为参数调用getNewCheckNodes()方法即可，如果value.value不等于根节点id，就去执行getChildList()去找到属于当前节点child_list，然后把结果作为参数调getNewCheckNodes()，将子树节点平铺成labelInValue的格式。

需要注意的有两点：
1.是勾选时先去一下重再push。
2.(写时遇到的坑)写这样受控的树时不要用Form了，因为勾选时想给自己setFiledValue是不支持的，上网查是因为

“antd中form表单的setFieldsValue只能设置其他域的值，不能控制自己表单域的值”

所以这里推荐使用state去改变组件的value属性赋值。这个是需要提前注意的地方。