Espero estar cerca de traducir mis viejos formularios de gancho de reacción a RHF7, pero estoy atascado tratando de compartir referencias dos veces con 2 entradas diferentes. ¿Puede alguien ayudarme a terminar este código? Necesito una referencia tanto en dobMonth como en dobYear, pero no puedo usar la misma referencia dos veces, así que necesito crear una segunda, pero no me deja.
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 }} /> Eventualmente necesito usar dobMonthInput.current.focus() y dobYearInput.current.focus()
Aparece el error Identifier 'ref' has already been declared por razones obvias, pero no sé cómo solucionarlo. Gracias
Tiene un problema con la declaración de referencia entre las referencias de gancho de reacción que están asignadas a la misma entrada, necesita crear una referencia pero sin usar una referencia ya asignada a otra entrada.
El truco aquí para resolver el problema:
const dopMReg = register("dobMonth"); const dopYReg = register("dobYear");por ejemplo:
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> ); }y esta es la url de demostración
puedes usar así también:
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), })