如何自动将一种输入形式转换为另一种形式？

如何解决如何自动将一种输入形式转换为另一种形式？

我想问一问是否可以在不单击输入的情况下以表格形式自动进行进度。我有一个代码验证输入，实际上我需要单击一个输入以逐个输入数字。我想看看这是否可以自动进行。在1个输入中写入1个数字时，它应自动聚焦下一个输入。有人可以帮我吗？

这是我的组件：

/* eslint-disable jsx-a11y/anchor-is-valid */
/* eslint-disable jsx-a11y/alt-text */
import React,{ useContext } from "react";
import { useForm } from "react-hook-form";
import { Link,useHistory } from 'react-router-dom';
import { AuthContext } from '../../../states/contexts/authContext';
import { maxLengthCheck } from '../../../helpers/FunctionsTools';

export const CodeVerificationForm = () => {

  const history = useHistory();
  const { register,handleSubmit,formState } = useForm();
  const { /* loading,*/ errorMessage,codeVerificationContext } = useContext(
    AuthContext
  );

  const handlVerificationSend = async(data) => {
    const credentials = {
      username: localStorage.getItem('username'),pin: data.digit1+data.digit2+data.digit3+data.digit4,};
    try {
      const response = await codeVerificationContext(credentials);
      if (response) {
        return history.push('/login/reset-password');
      }
    } catch(error) {
      //console.log(error)
    }
  }

  return (
    <div className="form-login-container">
      <div className="forgot-form-title-container mb-4">
        <h1 className="large-title-1 text-center">Verification Code</h1>
      </div>
      <p className="text-center forgot-subtitle-text">We sent a 4 digit verification code to your email <br /> please enter the code below.</p>
      <form onSubmit={handleSubmit(handlVerificationSend)}>
        <div className="code-group text-center"> 
            <input name="digit1" type="number" className="form-control" maxLength={1} onInput={maxLengthCheck} ref={register({ required: true })} />
            <input name="digit2" type="number" className="form-control" maxLength={1} onInput={maxLengthCheck} ref={register({ required: true })} />
            <input name="digit3" type="number" className="form-control" maxLength={1} onInput={maxLengthCheck} ref={register({ required: true })} />
            <input name="digit4" type="number" className="form-control" maxLength={1} onInput={maxLengthCheck} ref={register({ required: true })} />
        </div>
        {errorMessage && <div className="text-center"><small className="validation-text">Something is wrong!</small></div>}
        <div className="text-center mb-5 mt-5">
          <button 
            type="submit" 
            className={`btn w-100 ${formState.dirtyFields.digit1 && formState.dirtyFields.digit2 && formState.dirtyFields.digit3 && formState.dirtyFields.digit4 ? "orange-custom-button" : "disabled-custom-button"}`}
            disabled={formState.dirtyFields.digit1 && formState.dirtyFields.digit2 && formState.dirtyFields.digit3 && formState.dirtyFields.digit4 ? '' : 'disabled'}>Send
          </button>
          <p className="text-center orange-link">Didn't receive it? <Link to="/login/forgot-password">Try Again</Link></p>
        </div>
      </form>
    </div>
  );
};

提前谢谢。

解决方法

在maxLengthCheck中，检查刚刚更改的输入值是否不是最后一个子项，并集中显示nextElementSibling

,

解决了，我遵循了这个article并且我的结果是这个功能：

  const FocusNextInput = e => {
    const { maxLength,value,name } = e.target;
    const [ fieldName,fieldIndex ] = name.split("N");

    // Check if they hit the max character length
    if (value.length === maxLength) {
      // Check if it's not the last input field
      if (fieldIndex < 4) {
        // Get the next input field
        const nextSibling = document.querySelector(
          `input[name=digitN${parseInt(fieldIndex,4) + 1}]`
        );

        // If found,focus the next field
        if (nextSibling !== null) {
          nextSibling.focus();
        }
      }
    }
  }

这与输入中的onChange属性配合使用。