React验证码组件实现-踩坑记_07

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 点击之后回到第一个状态