Estoy haciendo un formulario de reacción simple con un formulario de gancho de reacción y sí como validador. Si la entrada del usuario se valida correctamente, quiero mostrar algunos comentarios al usuario, como un contorno verde. El problema es que solo quiero mostrar el contorno verde cuando mi entrada ha sido validada, no cada vez que se procesa el componente. ¿Cómo puedo hacer esto? Componente:
const schema = yup.object().shape({ email: yup .string() .required("This field is required"), password: yup.string().required("This field is required"), }); export const Form = () => { const { register, handleSubmit, getValues, formState: { errors }, } = useForm({ mode: "onBlur", resolver: yupResolver(schema), }); return ( <form noValidate onSubmit={handleSubmit(onSubmit)}> <label htmlFor="email">Email</label> <input id="email" {...register("email")} /> {errors.email ? errors?.email.message : null} <label htmlFor="password">Password</label> <input id="password" type="password" {...register("password")} /> {errors.password ? errors?.password.message : null} <button type="submit" > Submit </button> </form> ); };Puede implementar lo que quiera con la propiedad tocada. El uso de la propiedad Touch para este tipo de escenarios es muy común. Esto es lo que puede hacer:
Desde el useForm , también puede extraer los touchedFields
const { register, handleSubmit, getValues, formState: { errors, touchedFields } } = useForm({ mode: "onBlur", resolver: yupResolver(schema) });Las propiedades de los campos tocados almacenan los campos tocados. Se toca un campo la primera vez que el usuario deja el foco de ese campo. Entonces, puede mostrar condicionalmente un mensaje sobre un campo si se toca y no tiene errores como este:
{touchedFields.email && !errors.email ? <div>Email ok</div> : null}Puedes probar este arenero . Espero que puedas sacar la idea de ello.