En el siguiente StackBlitz tengo una validación de formulario muy simple. La validación se realiza cuando el usuario hace clic en el botón Enviar.

https://stackblitz.com/edit/react-formik-yup-example-uhdg-83teyn?file=Registration.js

 import { ErrorMessage, Field, Form, Formik } from 'formik'; import React from 'react'; import * as Yup from 'yup'; export default () => { return ( <Formik initialValues={{ email: '', }} validationSchema={Yup.object().shape({ email: Yup.string() .required('Email is required.') .email('Email is invalid.'), })} onSubmit={(values, { setSubmitting }) => { console.log(values); setSubmitting(false); }} enableReinitialize > {({ setFieldValue }) => ( <Form> <div> <Field type="text" name="email" onChange={({ target: { value } }) => { console.log(value); setFieldValue('email', value); }} /> <ErrorMessage name="email"> {(error) => <div style={{ color: '#f00' }}>{error}</div>} </ErrorMessage> </div> <input type="submit" value="Submit" /> </Form> )} </Formik> ); };

Lo que necesito es: activar la validación desde la primera pulsación de tecla (tenga en cuenta que no estoy interesado en validarlo cuando el componente está montado, sino justo después de la primera pulsación de tecla).

En otras palabras: cualquier pulsación de tecla en cualquier entrada dentro de Formik debería activar la validación solo para esa entrada específica (no para otras). Sería como el mismo efecto que escribir algo en esa entrada y luego presionar Enter (porque al presionar Enter activamos la validación). Pero quiero que eso suceda sin presionar Enter.

¿Alguna idea sobre cómo hacerlo de una manera adecuada?

¡Gracias!