Sharing ref usage twice in React Hook Forms 7

user_2495619 0
Viewed 836

I'm hoping I'm close to translating my old react hook forms to RHF7 but I'm stuck trying to share refs twice with 2 different inputs. Can someone help me finish this code...So I need a ref on both dobMonth and dobYear but I can't use the same ref twice so I need to create a second one but it won't let me.

  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
        }}
  />

I eventually need to use dobMonthInput.current.focus() and dobYearInput.current.focus()

I get the error Identifier 'ref' has already been declared for obvious reasons but I don't know how to get around it. Thanks

reactjs javascript
2 Answers

You have an issue with ref declaration between react hook refs which its assigned to the same input, you need to create ref but without using already assigned ref to another input.

The trick here to resolve issue:

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

for example:

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>
  );
}

and this the demo url

user_32881230

you can use like this too:

  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),
  })
user_150654140
Related