react+antd实现多位验证码输⼊框
刚上⼿react，公司给了个注册需求，需求⾥有⼀个验证码的需求，废话不多说，直接上效果图和代码。
效果图
点击第⼀个input输⼊框，输⼊第⼀位数值则会跳转下⼀个input框，到第四位输⼊框时监听删除按键，光标跳回上⼀个输⼊框。
import React, { Component } from "react";
import styles from "./dule.scss";
import { Form,Input, Button } from "antd";
class NormalLRegisterForm extends Component {
constructor(props) {
super(props);
this.state = {
maxLength: 1, //验证码长度
valueA: "", //验证码第⼀位
valueB: "", //⼆
valueC: "", //三
valueD: "", //四
};
}
//验证码光标后移
handleInputValue = (e, type) => {
const { isShow } = this.state;
const { value = "" } = e.target;
if (type == "A") {
if (value) this.secondFoucs.input.focus();
this.setState({
valueA: value.slice(0, 1)
});
} else if (type == "B") {
if (value) idFoucs.input.focus();
this.setState({
valueB: value.slice(0, 1)
});
} else if (type == "C") {
if (value) this.fourFoucs.input.focus();
this.setState({
valueC: value.slice(0, 1)
});
} else {
this.setState({
valueD: value.slice(0, 1),
isShow: true
});
}
};
//删除验证码
handleDel = e => {
const BACK_SPACE = 8;
const isBackSpaceKey = e.keyCode === BACK_SPACE;
if (isBackSpaceKey && e.target.value.length === 0) {
let previous = e.target;
previous = previous.previousElementSibling;
previous = previous.previousElementSibling;
while (previous) {
if (previous === null) break;
if (LowerCase() === "input") {
previous.focus();
break;
}
}
}
};
reder(){
const { valueA, valueB, valueC, valueD, maxLength } = this.state;
return(
<Form onSubmit={this.handleSubmit} className={isterForm}>      <p>请输⼊验证码</p>
<FormItem>
<Input
className={styles.checkInput}
ref={ref => {
this.firstFoucs = ref;
}}
value={valueA}
maxLength={maxLength}
onKeyDown={maxLength ? this.handleDel : null}
onChange={e => this.handleInputValue(e, "A")}
/>
<Input
className={styles.checkInput}
ref={ref => {
this.secondFoucs = ref;
}}
value={valueB}
maxLength={maxLength}
onKeyDown={maxLength ? this.handleDel : null}
onChange={e => this.handleInputValue(e, "B")}
/
>
<Input
foucs
className={styles.checkInput}
ref={ref => {
}}input框禁止输入
value={valueC}
maxLength={maxLength}
onKeyDown={maxLength ? this.handleDel : null}
onChange={e => this.handleInputValue(e, "C")}
/
>
<Input
className={styles.checkInput}
ref={ref => {
this.fourFoucs = ref;
}}
value={valueD}
maxLength={maxLength}
onKeyDown={maxLength ? this.handleDel : null}
onChange={e => this.handleInputValue(e, "D")}
/>
</FormItem>
</Form>
)
}
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。