欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

react+antd.3x实现ip输入框

程序员文章站 2022-06-25 10:54:04
本文实例为大家分享了react+antd.3x实现ip输入框的具体代码,供大家参考,具体内容如下表现形式如下:js+html/** * zks 2021 10 26 * ip输入框,作用于新建与修改虚...

本文实例为大家分享了react+antd.3x实现ip输入框的具体代码,供大家参考,具体内容如下

表现形式如下:

react+antd.3x实现ip输入框

js+html

/**
 * zks 2021 10 26
 * ip输入框,作用于新建与修改虚拟子网  
 * 使用方式:参看antd-form自定义表单控件。
 */
import react  from 'react';
import { input} from 'antd';
import styles from './index.less'
class ipinput extends react.component{
    constructor(){
        super();
        this._refs = {
          refip_0:react.createref(),
          refip_1:react.createref(),
          refip_2:react.createref(),
          refip_3:react.createref()
        };
    }
    handlenumberchange = (e,type) => {
        //确保最小值为0;
        const number = parseint(e.target.value || 0, 10);
        if (isnan(number)) {
          return;
        }
        let obj = {}
        obj[`${type}`] = number
        this.triggerchange(obj);
    };
    triggerchange = changedvalue => {
        const { onchange, value } = this.props;
        if (onchange) {
          onchange({
            ...value,
            ...changedvalue,
          });
        }
      };
    turnippos = (e,type)=>{
        let self = this;
         //左箭头向左跳转,左一不做任何措施
        if(e.keycode === 37) {
          if(type === 0) {} else {
            self._refs[`refip_${type-1}`].current.focus();
          }
        }
        //右箭头、回车键、空格键、冒号均向右跳转,右一不做任何措施
        if(e.keycode === 39 || e.keycode === 13 || e.keycode === 32 || e.keycode === 190) {
           if(type === 3) {} else {
            self._refs[`refip_${type+1}`].current.focus();
           }
        }
    }
    render(){
        const { value } = this.props;
        return (
            <input.group compact classname = {styles.inputgroup}>
              <input style={{ width: '24%' }} classname = {styles.self_input} ref = {this._refs.refip_0} value = {value.ip_0} maxlength ={3} onchange={(e)=>{this.handlenumberchange(e,'ip_0')}} onkeyup ={(e)=>this.turnippos(e,0)}/>
              <span classname = {styles.dot} ></span>
              <input style={{ width: '24%' }} classname = {styles.self_input} ref = {this._refs.refip_1} value = {value.ip_1} maxlength ={3} onchange={(e)=>{this.handlenumberchange(e,'ip_1')}} onkeyup ={(e)=>this.turnippos(e,1)}/>
              <span classname = {styles.dot}></span>
              <input style={{ width: '24%' }} classname = {styles.self_input} ref = {this._refs.refip_2} value = {value.ip_2} maxlength ={3} onchange={(e)=>{this.handlenumberchange(e,'ip_2')}} onkeyup ={(e)=>this.turnippos(e,2)}/>
              <span classname = {styles.dot}></span>
              <input style={{ width: '24%' }} classname = {styles.self_input} ref = {this._refs.refip_3} value = {value.ip_3} maxlength ={3} onchange={(e)=>{this.handlenumberchange(e,'ip_3')}} onkeyup ={(e)=>this.turnippos(e,3)}/>
            </input.group>
        )
    }
   
}
export default ipinput;

css

.inputgroup {
  border: 1px solid #d9d9d9;
  border-radius: 2px;
  transition: all 0.3s;
  &:hover {
    border-color: #45bbff;
    border-right-width: 1px !important;
    outline: 0;
    box-shadow: 0 0 0 2px rgba(29, 165, 255, 0.2);
  }
  text-align: center;
  .dot {
    width: 3px;
    height: 3px;
    border: 1px solid #000;
    border-radius: 3px;
    background-color: #000;
    opacity: 0.5;
    z-index: 9;
    position: relative;
    top: 21px;
  }
}
.self_input {
  border: none;
  outline: 0px;
  &:hover {
    box-shadow: none;
  }
  &::selection {
    box-shadow: none;
  }
  &:focus {
    box-shadow: none;
  }
}

使用方式

import ipinput from '../../public/ipinput';
<formitem label="子网网关" {...formitemlayout}>
                {getfielddecorator('price', {
                  initialvalue: { ip_0: 255, ip_1: 235, ip_2: 255, ip_3: 255 },
                  rules: [{ validator: this.checkip }],
                })(<ipinput />)}
 </formitem>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。