react+antd.3x實現(xiàn)ip輸入框

更新時間：2021年10月29日 14:34:52 作者：代碼小戳

這篇文章主要為大家詳細介紹了react+antd.3x實現(xiàn)ip輸入框，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了react+antd.3x實現(xiàn)ip輸入框的具體代碼，供大家參考，具體內(nèi)容如下

表現(xiàn)形式如下：

js+html

/**
 * zks 2021 10 26
 * ip輸入框，作用于新建與修改虛擬子網(wǎng)  
 * 使用方式：參看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;
         //左箭頭向左跳轉(zhuǎn)，左一不做任何措施
        if(e.keyCode === 37) {
          if(type === 0) {} else {
            self._refs[`refip_${type-1}`].current.focus();
          }
        }
        //右箭頭、回車鍵、空格鍵、冒號均向右跳轉(zhuǎn)，右一不做任何措施
        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="子網(wǎng)網(wǎng)關(guān)" {...formItemLayout}>
                {getFieldDecorator('price', {
                  initialValue: { ip_0: 255, ip_1: 235, ip_2: 255, ip_3: 255 },
                  rules: [{ validator: this.checkIp }],
                })(<IPInput />)}
 </FormItem>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: