Tengo un problema con un campo de texto en mi componente React+Formik.
Necesito que se establezca la propiedad tocada del campo cuando se activa onChange. La razón de esto es que estoy haciendo una validación en el formulario, las condiciones para que el campo dé error son las siguientes
Los conjuntos de Formik tocaron Blur, no onChange. El problema con esto es que el usuario puede marcar la casilla, escribir algo, eliminarlo y luego enfocar otra entrada. Esto no hace que se muestre el error porque la propiedad tocada del campo no se ha configurado, por lo que si declaración en la función de validación se evalúa como falso como tocado =/= verdadero.
Esto significa que el campo no es válido pero el error no se muestra al usuario, lo que es una experiencia de usuario incorrecta.
Función de validación
const validate = (values: PostJobForm) => { const errors: any = { compensation: {}, }; if ( values.compensation.hasBonus && formik.touched?.compensation?.annualBonus && !values.compensation.annualBonus ) { errors.compensation.annualBonus = "Required"; } return errors; };Lo que realmente necesito poder hacer es poder llamar a la función setFieldTouched de formik antes de llamar a la función handleChange. Sin embargo, no estoy seguro de si es posible hacer esto en el listado de eventos onChange en el elemento de entrada.
<input name="compensation.annualBonus" onChange={formik.handleChange} onBlur={formik.handleBlur} className="basic-input w-full mt-2" disabled={!formik.values.compensation.hasBonus} value={formik.values.compensation.annualBonus} />En lugar del onChange anterior, haría algo como
onChange={() => {formik.setFieldTouched('compensation.annualBonus'); formik.handleChange}}
Lo que establecería el accesorio tocado y luego usaría la función handleChange como controlador de eventos.
Pero estoy seguro de que eso no es posible. ¿Qué puedo hacer en su lugar?