0
303
ViewsCó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"), });3 answers
Answer question0
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:
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); }} />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: