封裝一個漂亮的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;

 

效果：

 

 

 

 

也可以在普通頁面中調用：

 

 獲取值

 

 效果：