封装一个漂亮的ant design form标签组件

在ant design 的form组件中 能用于提交的组件比较少，所以我在这写了一个可以单选、多选标签提交的组件，调用非常简单。

代码：

 import React,{Fragment} from 'react';
 import { Tag,Icon,Input } from 'antd';
 export interface TagDataType{
     data:string,
     color:string,
     key:string
 }
 export interface Props {
     data:Array<TagDataType>,
     click?:boolean,//是否可点击
     defaultKey?:string | Array<string>,//默认选择tag的key
     checkbox?:boolean,//多选
     form?:any,//form表单
     dataValidationName?:string,//设置提交名称，若用此参数提交则提交选中的data,用于菜单提交获取
     keyValidationName?:string,//设置提交名称,若用此参数提交则提交选中的key,用于菜单提交获取
     notNull?:boolean,//选项不能为空
 }
 
 export interface State {
     keys:string,//选中的标签的key，用','分割
     datas:string,//选中的标签的data，用','分割
     styleState:number | Array<number>,//选中的下标集
 }
 
 class TagOpt extends React.Component<Props, State> {
     constructor(props: Props) {
         super(props);
         //验证传入数据的合法性
         if(this.props.notNull && !!!this.props.defaultKey){
             throw Error('TagOpt选中项为空，设置defaultKey！');
         }
         if(!!this.props.form && !!!this.props.keyValidationName && !!!this.props.dataValidationName){
             throw Error('若要使用form提交，请设置keyValidationName或dataValidationName！');
         }
         this.state=this.setDefaultVal();
     }
     //鼠标点击标签事件
     TagClick = (tagData:TagDataType,index:number) =>{
         if(this.props.click !== undefined && this.props.click){
             if(this.props.checkbox){
                 const optIf = this.optIf(index);
                 let styleState:Array<number> = new Array();;
                 if(typeof this.state.styleState === 'object'){
                     styleState = [...this.state.styleState];
                 }else{
                     styleState = [this.state.styleState];
                 }
                 if(optIf.state){
                     //点击已选择
                     //如果设置不为空且选中选项大于1或者没有设置不为空选项
                     //则清空
                     if(this.props.notNull && styleState.length>1 || !!!this.props.notNull){
                         styleState.splice(optIf.index,1);
                         this.setState({
                             keys:this.moveSubString(this.state.keys,tagData.key),
                             datas:this.moveSubString(this.state.datas,tagData.data),
                             styleState
                         },()=>{this.setVal(this.state.datas,'data');this.setVal(this.state.keys,'key')});
                     }
                 }else{
                     //点击未选择
                     styleState.splice(styleState.length,0,index);
                     this.setState({
                         keys:this.addSubString(this.state.keys,tagData.key),
                         datas:this.addSubString(this.state.datas,tagData.data),
                         styleState
                     },()=>{this.setVal(this.state.datas,'data');this.setVal(this.state.keys,'key')});
                 }
             }else{
                 if(this.state.styleState === index){
                     //点击已选择
                     //若设置可以为空
                     //则清空
                     if(!!!this.props.notNull){
                         this.setState({keys:'',datas:'',styleState:this.props.data.length}
                         ,()=>{this.setVal(this.state.datas,'data');this.setVal(this.state.keys,'key')});
                     }
                 }else{
                     //点击未选择
                     this.setState({keys:tagData.key,datas:tagData.data,styleState:index}
                     ,()=>{this.setVal(this.state.datas,'data');this.setVal(this.state.keys,'key')});
                 }
             }
         }
     }
     //返回移出指定子串的字符串，移出所有重复子串
     moveSubString = (str:string,subString:string):string => {
         let array:Array<string> = str.split(',');
         for(let i=0;i<array.length;i++){
             if(array[i] === subString){
                 array.splice(i,1);
             }
         }
         return array.toString();
     }
     //返回增加子串的字符串，重复则不增加
     addSubString = (str:string,subString:string|Array<string>) =>{
         if(typeof subString === 'string'){
             let comma = str !==''?',':'';
             return str +comma+subString;
         }else{
             let s:string = str;
             for(let i=0;i<subString.length;i++){
                 let comma = s !==''?',':'';
                 s+=comma+subString[i];
             }
             return s;
         }
     }
     //选择判断
     optIf = (index:number):{state:boolean,index:number} => {
         if(typeof this.state.styleState ==='number'){
             return {state:this.state.styleState === index,index:0};
         }else{
             let falg:boolean = false;
             const styleState = this.state.styleState;
             let i=0;
             for(;i<styleState.length;i++){
                 if(styleState[i] === index){
                     falg = true;
                     break;
                 }
             }
             return {state:falg,index:i};
         }
     }
     //写入表单
     setVal = (data:string,type:string) => {
         if(this.props.form != undefined){
             let json:object = {}
             if(type === 'data'){
                 if(this.props.dataValidationName !== undefined){
                     json[this.props.dataValidationName] = data;
                     this.props.form.setFieldsValue(json);
                 }
             }else if(type === 'key'){
                 if(this.props.keyValidationName !== undefined){
                     json[this.props.keyValidationName] = data;
                     this.props.form.setFieldsValue(json);
                 }
             }
         }
     }
     //默认值转换
     setDefaultVal=():State=>{
         if(this.props.checkbox){
             //多选框，值为1个或数组
             let styleState:Array<number> = new Array();
             let keys:Array<string> = new Array();
             let datas:Array<string> = new Array();
             const {defaultKey,data} = this.props;
             if(typeof defaultKey === 'object'){
                 for(let i=0;i<defaultKey.length;i++){
                     for(let j=0;j<data.length;j++){
                         if(defaultKey[i] === data[j].key){
                             styleState.push(i);
                             keys.push(data[j].key);
                             datas.push(data[j].data);
                         }
                     }
                 }
                 return {
                     keys:this.addSubString('',keys),
                     datas:this.addSubString('',datas),
                     styleState
                 }
             }else{
                 let i:number = 0;
                 let key:string = '';
                 let dat:string = '';
                 for(;i<data.length;i++){
                     if(data[i].key === defaultKey){
                         key=data[i].key;
                         dat=data[i].data;
                         break;
                     }
                 }
                 return { keys:key,datas:dat,styleState: i };
             }
         }else if(this.props.checkbox === undefined && typeof this.props.defaultKey ==='string' ||
             !this.props.checkbox && typeof this.props.defaultKey ==='string'){
             //多选未设置且默认值为1个或单选且默认值为一个
             let i:number = 0;
             let key:string = '';
             let dat:string = '';
             if(this.props.defaultKey !== undefined){
                 const data = this.props.data;
                 for(;i<data.length;i++){
                     if(data[i].key === this.props.defaultKey){
                         key=data[i].key;
                         dat=data[i].data;
                         break;
                     }
                 }
             }
             return { keys:key,datas:dat,styleState: i };
         }else if(this.props.defaultKey === undefined || this.props.defaultKey === '' || this.props.defaultKey === []){
             if(this.props.checkbox){
                 return { keys:'',datas:'',styleState: [] };
             }else{
                 return { keys:'',datas:'',styleState: this.props.data.length };
             }
         }else{
             return {keys:'',datas:'',styleState: this.props.data.length};
         }
     }
     render() {
         const content:any = this.props.data.map((tagData:TagDataType,index:number)=>{
             const cursor:any = this.props.click !== undefined && this.props.click ?'pointer':'default';
             return(
                 <Tag color={tagData.color} key={tagData.key} onClick={this.TagClick.bind(this,tagData,index)} style={{cursor}}>
                     {tagData.data}
                     {this.optIf(index).state?<Icon type="check" />:undefined}
                 </Tag>
             )
         });
         return (
             <Fragment>
                 {content}
                 {
                     !!this.props.click && !!this.props.form && !!this.props.form.getFieldDecorator && !!this.props.keyValidationName?
                     this.props.form.getFieldDecorator(this.props.keyValidationName, {
                         initialValue:this.state.keys,
                     })(<Input type="hidden"/>)
                     :undefined
                 }
                 {
                     !!this.props.click && !!this.props.form &&!!this.props.form.getFieldDecorator && !!this.props.dataValidationName
                     && !!!this.props.keyValidationName?
                     this.props.form.getFieldDecorator(this.props.dataValidationName, {
                         initialValue:this.state.datas,
                     })(<Input type="hidden"/>)
                     :undefined
                 }
             </Fragment>
          );
     }
 }
 export default TagOpt;

效果：

也可以在普通页面中调用：

获取值

效果：