React验证码组件实现
最近一直在写bug和改bug的死循环过程
总结一下自己修改的一个验证码组件
原生实现输入框 代码
import React, { PureComponent, PropTypes } 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)
}
<!--防止获取焦点错误 延迟一下-->
componentDidMount() {
if (this.props.autoFocus) {
setTimeout(() => {
this._input.focus();
}, 300)
}
}
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
}
}
}
}
<!--焦点变化-->
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}
ref={(c) => this._input = c}
value={this.props.value}
/>
)
}
}
AutotabInput.propTypes = {
name: PropTypes.string,
onChange: PropTypes.func.isRequired,
type: PropTypes.string,
hint: PropTypes.string,
value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
maxLength: PropTypes.number,
style: PropTypes.object,
autoFocus: PropTypes.bool,
}
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) => {
this.props.onChange(index, unit);
};
render() {
const codeSty = {
marginRight: 10,
textAlign:'center',
width: 28,
height: 28
};
const codeStyErr = {
marginRight: 10,
textAlign:'center',
width: 28,
height: 28,
borderColor: '#f44236'
};
return (
<div>
<span>
<AutoTabInput
ref="inputmy"
type="text"
style={this.props.codeBorderStatus ? codeStyErr : codeSty}
autoFocus
maxLength={1}
value={this.props.value[0] ? this.props.value[0] : ''}
onChange={this.unitOnChange.bind(null, 0)}
/>
<AutoTabInput
type="text"
style={this.props.codeBorderStatus ? codeStyErr : codeSty}
maxLength={1}
value={this.props.value[1] ? this.props.value[1] : ''}
onChange={this.unitOnChange.bind(null, 1)}
/>
<AutoTabInput
type="text"
style={this.props.codeBorderStatus ? codeStyErr : codeSty}
maxLength={1}
value={this.props.value[2] ? this.props.value[2] : ''}
onChange={this.unitOnChange.bind(null, 2)}
/>
<AutoTabInput
type="text"
style={this.props.codeBorderStatus ? codeStyErr : codeSty}
maxLength={1}
value={this.props.value[3] ? this.props.value[3] : ''}
onChange={this.unitOnChange.bind(null, 3)}
/>
<AutoTabInput
type="text"
style={this.props.codeBorderStatus ? codeStyErr : codeSty}
maxLength={1}
value={this.props.value[4] ? this.props.value[4] : ''}
onChange={this.unitOnChange.bind(null, 4)}
/>
<AutoTabInput
type="text"
style={this.props.codeBorderStatus ? codeStyErr : codeSty}
maxLength={1}
value={this.props.value[5] ? this.props.value[5] : ''}
onChange={this.unitOnChange.bind(null, 5)}
/>
</span>
{this.props.allDelete ? (
<span
className="icon__dianpuhezi_close"
onClick={() => {
this.props.resetCode();
this.refs.inputmy._input.focus();
}}
/>
) : (
''
)}
</div>
);
}
}
export default CodeInput;
实现效果
加了一个全部清除的icon 点击之后回到第一个状态