本文实例为大家分享了react+antd.3x实现ip输入框的具体代码，供大家参考，具体内容如下
表现形式如下：
js+html
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>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程网。
