Question

在 React Hook Forms 7 中两次共享 ref 使用

2021-11-19

3147

javascript reactjs

我希望我即将将旧的 React Hook 表单转换为 RHF7，但我无法尝试使用两个不同的输入共享两次引用。有人可以帮我完成这段代码吗？所以我需要对 dobMonth 和 dobYear 都使用引用，但我不能两次使用同一个引用，所以我需要创建第二个引用，但它不允许我这样做。

  const dobMonthInput = useRef(null)
  const dobYearInput = useRef(null)

  const {
    register
  } = useForm()

  const { ref, ...rest } = register('dobMonth', {
    required: true,
    validate: (value) => validateDate(value, getValues),
    onChange: (e) => onChange(e),
  })
  /*const { ref, ...rest } = register('dobYear', {
    required: true,
    validate: (value) => validateDate(value, getValues),
    onChange: (e) => onChange(e),
  })*/


  ....



  <input
        name="dobDay"
        type="text"
        {...register('dobDay', {
            required: true,
            validate: (value) => validateDate(value, getValues),
            onChange: (e) => onChange(e),
        })}
  />

  <input
        name="dobMonth"
        type="text"
        {...rest}
        ref={(e) => {
            ref(e)
            dobMonthInput.current = e
        }}
  />
  <input
        name="dobYear"
        type="text"
        {...rest}
        ref={(e) => {
            ref(e)
            dobYearInput.current = e
        }}
  />

我最终需要使用 dobMonthInput.current.focus() 和 dobYearInput.current.focus()

出于显而易见的原因，我收到错误 Identifier 'ref' has already been declared ，但我不知道如何解决它。谢谢

Answer 1

您在分配给同一输入的 React hook refs 之间的 ref 声明方面遇到问题，您需要创建 ref，但不能使用已分配给另一个输入的 ref。

解决问题的技巧如下：

  const dopMReg = register("dobMonth");
  const dopYReg = register("dobYear");

例如：

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

export default function App() {
  const { register, handleSubmit } = useForm();
  const dobMonthInput = useRef(null);
  const dobYearInput = useRef(null);
  const onSubmit = (data) => {
    console.log(data);
    dobMonthInput.current.focus();
  }
  const dopMReg = register("dobMonth");
  const dopYReg = register("dobYear");

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input
        name="dobMonth"
        type="text"
        {...dopMReg}
        ref={(e) => {
          dopMReg.ref(e);
          dobMonthInput.current = e;
        }}
      />
      <input
        name="dobYear"
        type="text"
        {...dopYReg}
        ref={(e) => {
          dopYReg.ref(e);
          dobYearInput.current = e;
        }}
      />
      <button>Submit</button>
    </form>
  );
}

这是演示网址

Answer 2

您也可以这样使用：

  const dobYearInput = useRef(null)

  const {
    register
  } = useForm()

  const { ref:refDobMonth, ...restDobMonth } = register('dobMonth', {
    required: true,
    validate: (value) => validateDate(value, getValues),
    onChange: (e) => onChange(e),
  })
  const { ref:refDobYear, ...restDobYear } = register('dobYear', {
    required: true,
    validate: (value) => validateDate(value, getValues),
    onChange: (e) => onChange(e),
  })