Friday, 3 December 2021

Sharing ref usage twice in React Hook Forms 7

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 basically 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



from Sharing ref usage twice in React Hook Forms 7

No comments:

Post a Comment