React验证码组件实现
最近一直在写bug和改bug的死循环过程
总结一下自己修改的一个验证码组件
原生实现输入框 代码
import React from 'react'
class AutotabInput extends PureComponent {
constructor(props) {
super(props)
this.handleChange = this.handleChange.bind(this)
this.handleTab = this.handleTab.bind(this)
this.handleDelete = this.handleDelete.bind(this)
}
handleChange(e) {
const input = e.target.value
if (this.props.onChange) {
this.props.onChange(input)
}
this.handleTab(e)
}
handleDelete(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
while (previous) {
if (previous === null) break
if (previous.tagName.toLowerCase() === 'input') {
previous.focus()
break
}
}
}
}
handlePaste(e){
let clipboardData = e.clipboardData || window.clipboardData;
if(clipboardData){
let clipdata=clipboardData.getData('Text')
return this.props.handlePaste(clipdata)
}
}
handleTab(e) {
const target = e.target
const input = target.value
if (input.length >= this.props.maxLength) {
let next = target
next = next.nextElementSibling
while (next) {
if (next === null) break
if (next.tagName.toLowerCase() === 'input') {
next.focus()
break
}
}
}
}
render() {
return (
<input
type={this.props.type}
name={this.props.name}
placeholder={this.props.hint}
maxLength={this.props.maxLength}
// defaultValue={this.props.value}
onChange={this.handleChange}
onKeyDown={this.props.maxLength ? this.handleDelete : null}
style={this.props.style}
autoFocus={this.props.autoFocus}
value={this.props.value}
ref={c => (this._input = c)}
onPaste={(e)=>{this.handlePaste(e)}}
/>
)
}
}
export default AutotabInput
验证码组件
常见的六位数字验证码
import React from "react";
import AutoTabInput from "./AutoTabInput.jsx";
class CodeInput extends React.Component {
constructor(props) {
super(props);
this.state = {};
}
unitOnChange(index, unit) {
return this.props.onChange(index, unit);
}
render() {
const styleObj = {
boxSizing: "border-box",
border: "1px solid #cdcbcb",
boxShadow: "none",
outlineColor: "#1054ff",
outlineWidth: "2px",
textAlign: "center",
marginRight:10
};
const lastStyleObj = {
boxSizing: "border-box",
border: "1px solid #cdcbcb",
boxShadow: "none",
outlineColor: "#1054ff",
outlineWidth: "2px",
textAlign: "center",
};
const styleErr = {
boxSizing: "border-box",
border: "1px solid #f44236",
boxShadow: "none",
outline:'none',
textAlign: "center",
marginRight:10
};
const lastStyleErr = {
boxSizing: "border-box",
border: "1px solid #f44236",
boxShadow: "none",
outline:'none',
textAlign: "center",
};
return (
<div>
<div>
<span>
<AutoTabInput
ref="myinput"
style={this.props.codeBorderStatus ? styleErr : styleObj}
type="text"
maxLength={1}
value={this.props.value[0] ? this.props.value[0] : ""}
onChange={this.unitOnChange.bind(this, 0)}
autoFocus
handlePaste={this.props.handlePaste.bind(this)}
/>
<AutoTabInput
style={this.props.codeBorderStatus ? styleErr : styleObj}
type="text"
maxLength={1}
value={this.props.value[1] ? this.props.value[1] : ""}
onChange={this.unitOnChange.bind(this, 1)}
handlePaste={this.props.handlePaste.bind(this)}
/>
<AutoTabInput
style={this.props.codeBorderStatus ? styleErr : styleObj}
type="text"
maxLength={1}
value={this.props.value[2] ? this.props.value[2] : ""}
onChange={this.unitOnChange.bind(this, 2)}
handlePaste={this.props.handlePaste.bind(this)}
/>
<AutoTabInput
style={this.props.codeBorderStatus ? styleErr : styleObj}
type="text"
maxLength={1}
value={this.props.value[3] ? this.props.value[3] : ""}
onChange={this.unitOnChange.bind(this, 3)}
handlePaste={this.props.handlePaste.bind(this)}
/>
<AutoTabInput
style={this.props.codeBorderStatus ? styleErr : styleObj}
type="text"
maxLength={1}
value={this.props.value[4] ? this.props.value[4] : ""}
onChange={this.unitOnChange.bind(this, 4)}
handlePaste={this.props.handlePaste.bind(this)}
/>
<AutoTabInput
style={this.props.codeBorderStatus ? lastStyleErr : lastStyleObj}
type="text"
maxLength={1}
value={this.props.value[5] ? this.props.value[5] : ""}
onChange={this.unitOnChange.bind(this, 5)}
handlePaste={this.props.handlePaste.bind(this)}
/>
</span>
{this.props.allDelete ? (
<div className='clearIcon'>
<span
className="icon__dianpuhezi_close"
style={{color:'#6b798e',boxSizing: "border-box"}}
onClick={() => {
this.props.resetCode();
this.refs.myinput._input.focus();
}}
/>
</div>
) : (
""
)}
</div>
</div>
);
}
}
export default CodeInput;
github连接
https://github.com/xiaopingzh...
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。