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

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

注:该篇为上一篇《》的 解释及使用说明。

地址:

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

  • 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表单有如下声明:
www.zeeklog.com  - 使用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地址: