Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

163
Views
Configurar manualmente un campo para tocar onChange en lugar de onBlur con formik o ¿puedo llamar manualmente a una función antes de configurar un controlador de eventos?

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

  1. Una casilla de verificación cercana está marcada (lo que habilita la entrada)
  2. El onChange de la entrada se ha disparado una vez (se ha producido un evento clave)
  3. La entrada está vacía.

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?

about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!