Estoy creando un formulario usando reaccionar y formik. A continuación se muestra mi código:
<div> <Formik initialValues={{ email: "" }} onSubmit={(values: FState, setSubmitting: any) => { console.log("Enter in submit function", values); setTimeout(() => { alert(JSON.stringify(values, null, 2)); setSubmitting(false); }, 500); }} validationSchema={validationSchemaGlobal} > {({ errors, touched, handleBlur, handleChange, isSubmitting, values, handleSubmit }: any) => ( <div> <Cards> <form onSubmit={handleSubmit}> <CardBody> <h4> Enter Your Email Address and we'll send you a link to reset your password </h4> <Field type="text" id="email" value={values.email} component={CustomInput} onChange={handleChange} onBlur={handleBlur} /> {errors.email && touched.email ? ( <div style={{ color: "red" }}>{errors.email}</div> ) : null} </CardBody> <CardFooter> <br /> <button type="submit" disabled={isSubmitting}> Send Password Reset Link {/* {isSubmitting && <i className="fa fa-sponner fa-spin"/>} */} </button> </CardFooter> </form> </Cards> </div> )} </Formik> </div>En este formulario formik, la función onSubmit no funciona. no se porque Por favor, díganme, ¿cuál es el problema con mi código?
Verifique su esquema de validationSchema . Me encontré con este problema y descubrí que mi validador devolvía algo que le indicaba a Formik que el formulario no era válido, pero no aparecían otras advertencias o mensajes. Simplemente no se sometería.
Reemplace ese accesorio con validator={() => ({})} , es decir, solo se devuelve un objeto vacío. Eso debería pasar la validación y activar su onSubmit. Puede restaurar su funcionalidad desde allí.
<Formik initialValues={{ email: "" }} onSubmit={() => { console.log("submit!"); }} validator={() => ({})} > {/* */} </Formik>En mi caso, uso Yup como firstName y accidentalmente tenía el nombre y el lastName en mi esquema de validationSchema según lo requerido, pero no tenía esos valores en mi formulario.
Mi esquema de validationSchema fue,
const SignupSchema = Yup.object().shape({ firstName: Yup.string() .min(2, 'Too Short!') .max(50, 'Too Long!') .required('Required'), lastName: Yup.string() .min(2, 'Too Short!') .max(50, 'Too Long!') .required('Required'), email: Yup.string() .email('Invalid email') .required('Required'), password: Yup.string() .min(6, 'Password must be at least 6 characters') .max(24, 'Password can be maximum 24 characters') .required('Required') }) Acabo de eliminar firstName y lastName ,
const SignupSchema = Yup.object().shape({ email: Yup.string() .email('Invalid email') .required('Required'), password: Yup.string() .min(6, 'Password must be at least 6 characters') .max(24, 'Password can be maximum 24 characters') .required('Required') }) Así que revise su esquema de validationSchema y vea si necesita algo que no existe en su formulario.
Importé Form desde react-bootstrap en lugar de formik , por lo que tenía este problema. El problema se resolvió importando el Form de formik . A veces, el uso directo de Form.Control de react-bootstrap en lugar de Field of formik también genera este problema.
Si realmente tiene que usar Form.Control , puede usar render prop.