在maxlength功能组件之后移动到下一个输入

Question

我使用的是react Hook-form，我有一个电话号码的场景，其中有三个输入字段XXX-XXX-XXXX。我想将焦点从第一个输入转移到下一个到达maxlength===3.please后，建议在达到最大长度后自动聚焦下一个手机输入。致力于反应功能成分的研究。

这是密码，

import React from 'react';
import { useForm } from "react-hook-form";

export function PhoneInput(props) {
 const {
    register,
    handleSubmit,
    watch,
    clearErrors,
    formState: { errors }
  } = useForm();

return (

 <form className="review-your-info-form" id="purchase-form" onSubmit={handleSubmit(onSubmit)} noValidate>
<div className="field">
                    { (errors.phone1 || errors.phone2 || errors.phone3)  && <div className="error-msg"><span className="required">{errors.phone1?.message || errors.phone2?.message || errors.phone3?.message}</span></div>}
                    <label htmlFor="phone1">Phone *</label>
                    <div className="phone-group flex">
                      <input
                        id="phone1"
                        type="tel"
                        className="phone1"
                        maxLength="3"
                        onClick={() => clearErrors("phone1")}
                        {...register("phone1",{
                          required: 'phone-error',
                          minLength: {
                            value: 3,
                            message: 'phone-error'
                          },
                          pattern: {
                            value: /[2-9][0-9]{2}$/,
                            message: 'phone-error'
                          },
                        })}
                      />
                      <input
                        type="tel"
                        className="phone2"
                        maxLength="3"
                        onClick={() => clearErrors("phone2")} 
                        {...register("phone2",{
                          required: 'phone-error',
                          minLength: {
                            value: 3,
                            message: 'phone-error'
                          },
                          pattern: {
                            value: /[2-9][0-9]{2}$/,
                            message: 'phone-error'
                          },
                        })}
                      />
                      <input
                        type="tel"
                        className="phone3"
                        maxLength="4"
                        onClick={() => clearErrors("phone3")} 
                        {...register("phone3",{
                          required: 'phone-error',
                          minLength: {
                            value: 4,
                            message: 'phone-error'
                          },
                          pattern: {
                            value: /^[0-9]*$/i,
                            message: 'phone-error'
                          },
                        })}
                      />
                    </div>
                  </div>
 </form>
)}```

Answer 1

要在React中移动焦点，可以使用useRef钩子：

import React, { useState, useRef } from 'react';
import { useForm } from "react-hook-form";

export function PhoneInput(props) {
 const [input, setInput] = useState();
 const {
    register,
    handleSubmit,
    watch,
    clearErrors,
    formState: { errors }
  } = useForm();

const inputToFocus = useRef(); //<-- create ref

const handleChange = (e) => {
    setInput(e.target.value);
    if (e.target.value.length >= 3) inputToFocus.current.focus(); //<--- focus second input
}

return (

 <form className="review-your-info-form" id="purchase-form" onSubmit={handleSubmit(onSubmit)} noValidate>
<div className="field">
                    { (errors.phone1 || errors.phone2 || errors.phone3)  && <div className="error-msg"><span className="required">{errors.phone1?.message || errors.phone2?.message || errors.phone3?.message}</span></div>}
                    <label htmlFor="phone1">Phone *</label>
                    <div className="phone-group flex">
                      <input
                        value={input}
                        onChange={handleChange} //<-- edit input
                        id="phone1"
                        type="tel"
                        className="phone1"
                        maxLength="3"
                        onClick={() => clearErrors("phone1")}
                        {...register("phone1",{
                          required: 'phone-error',
                          minLength: {
                            value: 3,
                            message: 'phone-error'
                          },
                          pattern: {
                            value: /[2-9][0-9]{2}$/,
                            message: 'phone-error'
                          },
                        })}
                      />
                      <input
                        ref={inputToFocus}  //<-- assing ref
                        type="tel"
                        className="phone2"
                        maxLength="3"
                        onClick={() => clearErrors("phone2")} 
                        {...register("phone2",{
                          required: 'phone-error',
                          minLength: {
                            value: 3,
                            message: 'phone-error'
                          },
                          pattern: {
                            value: /[2-9][0-9]{2}$/,
                            message: 'phone-error'
                          },
                        })}
                      />
                      <input
                        type="tel"
                        className="phone3"
                        maxLength="4"
                        onClick={() => clearErrors("phone3")} 
                        {...register("phone3",{
                          required: 'phone-error',
                          minLength: {
                            value: 4,
                            message: 'phone-error'
                          },
                          pattern: {
                            value: /^[0-9]*$/i,
                            message: 'phone-error'
                          },
                        })}
                      />
                    </div>
                  </div>
 </form>
)}

说明:当值达到3时，第一个输入必须将焦点传递给第二个输入，因此：

1. I创建一个inputToFocus ref并将其分配给第二个输入；
2. 然后创建handleChange函数:设置第一个输入值，如果值长度为>= 3，则使用以前创建的ref将焦点移动到第二个输入。