6位交易密码框

import React, { Component } from 'react'
import { Form, Input } from 'antd';

export default class Passwordbeifen extends Component {
    constructor(props) {
        super(props)
        this.password1 = React.createRef()
        this.password2 = React.createRef()
        this.password3 = React.createRef()
        this.password4 = React.createRef()
        this.password5 = React.createRef()
        this.password6 = React.createRef()
        this.state = {
            number: []
        }
    }

    confirm = (e) => {
        if (e.keyCode == 37 || e.keyCode == 38) {
            e.preventDefault()
        }
    }
    changeValue = (num, e) => {

        let { number } = this.state
        number[num] = e.target.value


        this.props.getValue(number)

    }
    changePassword1 = (e) => {

        if (this.password1.current.state.value !== '') {
            if (e.keyCode == 37) {
                this.password6.current.focus();
            } else {
                this.password2.current.focus();
            }

        }
        if (e.keyCode == 39) {//向后
            this.password2.current.focus();
        }

    }
    changePassword2 = (e) => {
        if (this.password2.current.state.value !== '') {
            this.password3.current.focus();
        }
        if (e.keyCode == 8 && this.password2.current.state.value == '') {  //删除
            this.password1.current.focus()
        } else if (e.keyCode == 37) {//向前
            e.preventDefault()
            this.password1.current.focus()
        } else if (e.keyCode == 39) {//向后
            this.password3.current.focus();
        }

    }
    changePassword3 = (e) => {
        if (this.password3.current.state.value !== '') {
            this.password4.current.focus();
        }
        if (e.keyCode == 8 && this.password3.current.state.value == '') {
            this.password2.current.focus()
        } else if (e.keyCode == 37) {//向前
            e.preventDefault()
            this.password2.current.focus()
        } else if (e.keyCode == 39) {//向后
            this.password4.current.focus();
        }

    }
    changePassword4 = (e) => {
        if (this.password4.current.state.value !== '') {
            this.password5.current.focus();
        }
        if (e.keyCode == 8 && this.password4.current.state.value == '') {
            this.password3.current.focus()
        } else if (e.keyCode == 37) {//向前
            e.preventDefault()
            this.password3.current.focus()
        } else if (e.keyCode == 39) {//向后
            this.password5.current.focus();
        }
    }
    changePassword5 = (e) => {
        if (this.password5.current.state.value !== '') {
            this.password6.current.focus();
        }
        if (e.keyCode == 8 && this.password5.current.state.value == '') {
            this.password4.current.focus()
        } else if (e.keyCode == 37) {//向前
            e.preventDefault()
            this.password4.current.focus()
        } else if (e.keyCode == 39) {//向后
            this.password6.current.focus();
        }
    }
    changePassword6 = (e) => {

        if (e.keyCode == 8 && this.password6.current.state.value == '') {

            this.password5.current.focus()
        } else if (e.keyCode == 37) {//向前
            e.preventDefault()
            this.password5.current.focus()
        }
    }
    render() {
        return (
            <div className='loan'>
                <>
                    <div>
                        <Input type='tel' ref={this.password1} className='input_password' maxLength={1} onKeyUp={this.changePassword1.bind(this)} onKeyDown={this.confirm.bind(this)} onChange={this.changeValue.bind(this, 0)} />
                        <Input type='tel' ref={this.password2} className='input_password' maxLength={1} onKeyUp={this.changePassword2.bind(this)} onKeyDown={this.confirm.bind(this)} onChange={this.changeValue.bind(this, 1)} />
                        <Input type='tel' ref={this.password3} className='input_password' maxLength={1} onKeyUp={this.changePassword3.bind(this)} onKeyDown={this.confirm.bind(this)} onChange={this.changeValue.bind(this, 2)} />
                        <Input type='tel' ref={this.password4} className='input_password' maxLength={1} onKeyUp={this.changePassword4.bind(this)} onKeyDown={this.confirm.bind(this)} onChange={this.changeValue.bind(this, 3)} />
                        <Input type='tel' ref={this.password5} className='input_password' maxLength={1} onKeyUp={this.changePassword5.bind(this)} onKeyDown={this.confirm.bind(this)} onChange={this.changeValue.bind(this, 4)} />
                        <Input type='tel' ref={this.password6} className='input_password' maxLength={1} onKeyUp={this.changePassword6.bind(this)} onKeyDown={this.confirm.bind(this)} onChange={this.changeValue.bind(this, 5)} />
                    </div>

                </>
            </div>
        )
    }
}