使用antd form开发支持动态增减表单项，可选有初始值组件的一种实现方式（二）

注：该篇为上一篇《使用antd form开发支持动态增减表单项，可选有初始值组件的一种实现方式（一）》的 解释及使用说明。

地址：https://blog.csdn.net/smk108/article/details/84554186

该组件实现了从初始状态添加、有初始值的编辑、并一直支持动态增减表单项的功能，组件解释如下：

• render时有没有初始值之keys的赋值：

const {getFieldDecorator, getFieldValue} = this.props.form;
const initKeys = getFieldValue('keys');
const InitialKeys = initKeys || this.getInitialKeys();
getFieldDecorator('keys', {'initialValue': InitialKeys});

getInitialKeys(){
    const {tag} = this.props;
    let nextKeys = [];
    for(let i = 0; i < tag.length; i ++){
        nextKeys = nextKeys.concat([this.uuid, this.uuid + 1]);
        this.uuid = this.uuid + 2;
    }
    return nextKeys;
}

组件首次render时，获取到的initKeys为null，此时调用getInitialKeys方法从props的tag中解析应该有的初始keys；如果组件已经render过，则获取到的initKeys不为null，不需要重新赋值；若获取到的initKeys为null，且props传入的tag为空，getInitialKeys获取到[]，即赋初值为[]。

• 编辑时，从props传入了tag，在componentDidMount赋values的初值

componentDidMount(){ // DidMount赋初值
    const {tag, form} = this.props;
    let formTag = [];
    for(let i = 0; i < tag.length; i ++){
        formTag = formTag.concat([tag[i].tagLabel, tag[i].tagValue]);
    }
    form.setFieldsValue({
        'formTag': formTag
    });
}

• add和remove时重新给keys赋值，见addTag及removeTag方法。
• 为实现布局，使用了Row, Col及constructor里声明的各种布局方式。
• 因为antd官网关于form表单有如下声明：

所以在该组件中没有使用componentWillReceiveProps周期更新不同的props，在props更新时需要重新加载该组件，即应该有如下处理：

{showTagComponent ?
    <TagComponent
        tag={tag}
 	ref={ref => (this.tagRef = ref)}
	label='tag'
    /> : ''
}

或者可以尝试Form的mapPropsToFields处理props数据（待验证）。

• 在使用该组件的组件中实现如下方法：

getTagValues(){
      // Form包裹的组件无法通过ref获取子组件的function，这里直接调用子组件Form获取数据的方法
      let tagValues;
      this.tagRef.validateFields((err, values) => {
          if (!err) {
             tagValues = values;
         }
      });
        return tagValues;
    }

获取该组件的值，值的格式为：

{formTag: ["label1", "value1", "label2", "value2"],keys:  [0, 1, 2, 3]}

然后可以按照需要处理formTag，类似于：

if(tagValues.formTag){
    const {formTag} = tagValues;
    const formTagLength = formTag.length;
    for(let i = 0; i < formTagLength; i += 2){
        if(formTag[i]){
            tag[formTag[i]] = formTag[i + 1];
        }
    }
}

到这里，这个组件的封装及使用就已经实现了。当然，这是按照我在项目中的需求实现的组件，已经证明这种方式可以实现支持动态增减表单项，可选有初始值的功能，使用时需要按照不同的需求进行组件的封装及使用。

随时欢迎找我沟通与交流相关技术。

demo地址：https://blog.csdn.net/smk108/article/details/101784236