web-dev-qa-db-fra.com

La fonction Formik onSubmit ne fonctionne pas sur mon code

Je crée un formulaire en utilisant react et formik. Voici mon code:

<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>

Dans ce formulaire, la fonction onSubmit ne fonctionne pas. Je ne sais pas pourquoi? S'il vous plaît dites-moi les gars quel est le problème avec mon code?

reactjstypescriptformik
15
NewCoder

Vérifiez votre validationSchema. J'ai rencontré ce problème et j'ai constaté que mon validateur retournait quelque chose qui signalait à Formik que le formulaire n'était pas valide, mais aucun autre avertissement ou message ne s'affichait. Il ne voulait tout simplement pas se soumettre.

Remplacez cet accessoire par validator={() => ({})} c'est-à-dire juste un objet vide renvoyé. Cela devrait passer la validation et déclencher votre onSubmit. Vous pouvez restaurer vos fonctionnalités à partir de là.

  <Formik
    initialValues={{
      email: ""
    }}
    onSubmit={() => { console.log("submit!"); }}
    validator={() => ({})}
  >
    {/* */}
  </Formik>
27
Chris