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

Question

我正在使用 react-Hook-form，我有一个 phone 号码的场景，该号码具有三个输入字段 XXX-XXX-XXXX。我想在达到 maxlength===3.please 后将焦点从第一个输入转移到下一个输入建议一个解决方案，以在达到最大长度后自动关注下一个 phone 输入。致力于 React 功能组件。

这是代码，

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 时，第一个输入必须将焦点传递给第二个输入，所以：

我创建了一个 inputToFocus ref 并分配给第二个输入；
然后我创建 handleChange 函数来：设置第一个输入值，如果值长度 >= 3，则使用之前创建的 ref 将焦点移动到第二个输入。

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

Move to next input after maxlength react functional component

reactjs

react-hook-form