封装一个漂亮的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;

效果：

 

 

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

 获取值

 效果：