使用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表单有如下声明:
所以在该组件中没有使用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地址: