react+antd实现多位验证码输入框

刚上手react，公司给了个注册需求，需求里有一个验证码的需求，废话不多说，直接上效果图和代码。

效果图

点击第一个input输入框，输入第一位数值则会跳转下一个input框，到第四位输入框时监听删除按键，光标跳回上一个输入框。

import React, { Component } from "react";
import styles from "./index.module.scss";
import { Form,Input, Button } from "antd";
class NormalLRegisterForm extends Component {
 constructor(props) {
    super(props);
    this.state = {
      maxLength: 1, //验证码长度
      valueA: "", //验证码第一位
      valueB: "", //二
      valueC: "", //三
      valueD: "", //四
    };
  }
  //验证码光标后移
  handleInputValue = (e, type) => {
    const { isShow } = this.state;
    const { value = "" } = e.target;
    if (type == "A")