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