React驗證碼組件實現_07

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...