如何在表单中从一个输入自动前进到另一个输入？

Question

我想问一下是否可以在不单击输入的情况下自动在表单中进行进度。我有一个代码验证输入，实际上我需要单击输入以逐个写入数字。我想看看这是否可以自动进行。在 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>
  );
};

提前致谢。

Answer 1

在maxLengthCheck 中检查刚刚更改的值是否不是最后一个子元素并关注 nextElementSibling

Answer 2

解决，我关注了这个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 属性。