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输入框的具体代码,供大家参考,具体内容如下
表现形式如下:
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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: 提子要放冰箱保存吗