react antd常用插件二次封装

import React, { Component } from 'react';
import './index.less';
import moment from 'moment';
import {checkNull} from '../tools.js'
import {Select,Input,message} from 'antd'
const TextArea = Input.TextArea;
const Option = Select.Option;



/*---------------------------------       Input 输入框      ----------------------------------------*/
class NavInput extends Component{ 
    /*判断事件 */
    check=(e)=>{
        e=window.event||e; //消除浏览器差异 
        const code = e.keyCode||e.which;  //8 为backsppace键
        const {onChange=()=>{}, tle="", dataType=""}=this.props;
        switch (dataType){
            case ("number"):
                if(code!==8 && isNaN(e.target.value)){
                    e.target.value  = e.target.value.substring(0,(e.target.value.length-1)).replace(/[^\d.]/g,'');    /*如果不是数字就把这次输入的值截取掉*/
                    message.warning(tle+'只能输入数字！');
                    return false;
                }
            break;
            case ("nochinese"):
                if (code!==8 && /[\u4E00-\u9FA5]/i.test(e.target.value)) { 
                    e.target.value  = e.target.value.substring(0,(e.target.value.length-1)).replace(/[\u4E00-\u9FA5]/g,'');    /*如果是中文就把这次输入的值截取掉*/
                    message.warning(tle+"不能有中文！");
                    return false;
                }
            break;
            case ("chinese"):
                if (code!==8 && !/^[\u4e00-\u9fa5]*$/i.test(e.target.value)) { 
                    e.target.value  = e.target.value.substring(0,(e.target.value.length-1));    /*如果是中文就把这次输入的值截取掉*/
                    message.warning(tle+"只能为中文！"); 
                    return false;
                }
            break;
            case ("bankCard"):
                if(code!==8){
                    if(isNaN(e.target.value.replace(/\s/g,''))){
                        e.target.value  = e.target.value.substring(0,(e.target.value.length-1));    /*如果不是数字就把这次输入的值截取掉*/
                        message.warning('只能输入数字！');
                        return false;
                    }else{
                        const length=(e.target.value).replace(/\s/g,'').length;
                        if(length===4 ||length===8 ||length===12){
                            e.target.value=e.target.value+" "
                        }else if(length>19){
                            e.target.value  = e.target.value.substring(0,(e.target.value.length-1)); 
                        }
                    }
                }
            break;
        }
    }/* 改变值时的回调 */
    handleChange=(e)=>{
        const {onChange=()=>{},}=this.props;
        let val = e.target.value.replace(/(^\s*)|(\s*$)/g, "");
        onChange(val,e);
    }/* 按下回车的回调 */
    handlePressEnter=(e)=>{
        const {onPressEnter=()=>{},}=this.props;
        let val = e.target.value.replace(/(^\s*)|(\s*$)/g, "");
        onPressEnter(val,e);
    }
    render(){
        const {tle="", labelStyle, className="",  width="220px" , onChange ,  keyName ,  size = "large", placeholder = "请输入"+tle, defaultValue="", dataType, type="text", disabled=false } = this.props;
        return ( 
            <div>
                {
                    type==="text"?
                        <div className={"nav_input "+className}>
                            <label style={labelStyle} >{tle}</label>
                            <Input defaultValue={defaultValue} type={type}  size={size} placeholder={placeholder} style={{ width:width }} disabled={disabled} onKeyUp={e=>this.handleChange(e)} onInput={e=>this.check(e)} onPressEnter={e=>this.handlePressEnter(e)} />
                        </div>
                    :
                        type==="TextArea"?
                            <div className={"nav_input "+className}>
                                <label style={labelStyle} >{tle}</label>
                                <TextArea defaultValue={defaultValue} type={type}  size={size} placeholder={placeholder} style={{ width:width }} disabled={disabled} onKeyUp={e=>this.handleChange(e)}   onPressEnter={e=>this.handlePressEnter(e)}/>
                            </div>
                        :
                            ""
                }
            </div>
        )
    }
};

/*---------------------------------       下拉框      ----------------------------------------*/
class NavSelect extends Component{ 
    handleChange=(value)=>{
        const {mode,onChange}=this.props;
        if(mode==="multiple"){
            let valIds = Array.from(value,obj=>obj);
            onChange(valIds.toString());
        }else{
            onChange(value);
        }
    }
    render(){
        let { tle="",width="200px",dataKey="id,name",size="large",divStyle,labelStyle,options,placeholder="请选择",defaultValue="",className="",showData="", mode="", showNullSelect="false"  } = this.props; //showNullSelect下拉是否显示请选择  只对单选有效
        const name=dataKey.split(",")[1];
        const id=dataKey.split(",")[0];
        /* 处理默认值 */
        let haveContent=[];
        if(checkNull(defaultValue)!==""){
            if(mode==="multiple"){
                defaultValue=typeof(defaultValue)!=="string"?String(defaultValue).toString():defaultValue;  //转换成字符串
                if(defaultValue.indexOf(",")==="-1"){
                    haveContent.push(defaultValue)
                }else{
                (defaultValue.split(",")).forEach((obj,i)=>{
                        haveContent.push(obj)
                    })
                }
            }else{
                haveContent=typeof(defaultValue)!=="string"?String(defaultValue).toString():defaultValue;  //转换成字符串
            }
        }
        /* 处理下拉数据 */
        let children = [];
        mode!=="multiple" && showNullSelect==="true"?children.push(<Option key="请选择" title="请选择" value="">请选择</Option>):"";
        options.map((data,i)=>{
            const dataId=typeof(data[id])!=="string"?String(data[id]):data[id];  //转换成字符串
            children.push(<Option key={dataId} title={data[name]} value={dataId}>{data[name]}</Option>) 
        })
        return (
            <div className={"Gao-nav-select "+className} style={divStyle}>
                {checkNull(tle)===""?"":<label className="label-style" style={labelStyle}>{tle}</label>}
                <Select 
                    multiple={mode==="multiple"?true:false}
                    size={size} 
                    placeholder={placeholder}  
                    style={{width}} 
                    disabled={false} 
                    onChange={this.handleChange}
                    defaultValue={haveContent}
                    allowClear={mode==="multiple"?false:true}
                >
                    {children}
                </Select>
            </div>
        );
    }
}



/*---------------------导出--------------------------*/
export {
    NavInput,
    NavSelect
}

 

转载于:https://www.cnblogs.com/webqiand/articles/11250046.html