• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Evaluaciones
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

224
Vistas
Cómo dejar de mostrar el error cuando los datos dentro de la entrada de texto se configuraron así: value={value} React Hook Form

React Hook Forms detecta que cambio el valor de la entrada de texto cuando escribo algo (onChange). Pero, ¿también puede detectar el cambio si ingreso datos en la entrada por value={value} ?

const validator = register(name);

necesito algo como

 onValueSet={(e) => { validator.onChange(e); }}

Quiero decir, si solo configuro datos por value={value} , aparece un error que indica que se requiere esta entrada. No quiero este error, porque los datos fueron establecidos por value={value} .

Aquí está mi entrada:

 <StyledInput name={name} maxLength={100} value={value} onChange={(e) => { validator.onChange(e); }} />

y mi esquema de validación:

 const validationSchema = Yup.object().shape({ first_name: Yup.string() .required("required"), });
almost 3 years ago · Juan Pablo Isaza
3 Respuestas
Responde la pregunta

0

Debe usar reset aquí y llamarlo cuando recibió los datos de su formulario inicial. Supongo que está haciendo una llamada a la API y desea establecer el resultado en el formulario. Puede hacerlo con useEffect , observando cuándo se han resuelto sus datos y luego restableciendo el formulario con los valores reales. De esta manera, no tiene que establecer el valor a través de la propiedad de value y dejar que RHF administre el estado de sus entradas. Tampoco es necesario configurar el name prop, ya que la llamada de register de RHF también devuelve este prop.

 const Component = (props) => { const { result } = useApiCall(); const { register, reset } = useForm(); useEffect(() => { reset(result) }, [result]); return ( ... <StyledInput {...register('first_name')} maxLength={100} /> ... ) }

Aquí hay un pequeño CodeSandbox que demuestra su caso de uso:

Editar formulario React Hook - Restablecer formulario (bifurcado)

almost 3 years ago · Juan Pablo Isaza Denunciar

0

Puede definir un evento onfocus o onkeyup y llamar a la función de validación allí en lugar del evento onChange .

 <StyledInput name={name} maxLength={100} value={value} onfocus={(e) => { validator.onChange(e); }} />
almost 3 years ago · Juan Pablo Isaza Denunciar

0

En lugar de activar el validador cuando cambia la entrada, puede llamar a su validador a través del evento onBlur . Y no estoy seguro de cómo está utilizando react-hook-form... pero el gancho useForm tiene un modo de configuración (onChange | onBlur | onSubmit | onTouched | all = 'onSubmit') sobre cuándo activar la validación:

almost 3 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda