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

 /** * 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 ( {this.handleNumberChange(e,'ip_0')}} onKeyUp ={(e)=>this.turnIpPOS(e,0)}/> {this.handleNumberChange(e,'ip_1')}} onKeyUp ={(e)=>this.turnIpPOS(e,1)}/> {this.handleNumberChange(e,'ip_2')}} onKeyUp ={(e)=>this.turnIpPOS(e,2)}/> {this.handleNumberChange(e,'ip_3')}} onKeyUp ={(e)=>this.turnIpPOS(e,3)}/>  ) } } export default IpInput;

 .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';  {getFieldDecorator('price', { initialValue: { ip_0: 255, ip_1: 235, ip_2: 255, ip_3: 255 }, rules: [{ validator: this.checkIp }], })()}