web-dev-qa-db-ja.com

FormikのonSubmit関数がコードで機能しない

Reactとformikを使用してフォームを作成しています。以下は私のコードです。

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

この形式では、onSubmit関数が機能しません。なぜだかわかりませんか？私のコードの何が問題なのか教えてください

reactjstypescriptformik
15
NewCoder

validationSchemaを確認してください。私はこの問題に遭遇し、フォームが無効であることをFormikに通知する何かをバリデーターが返していましたが、他の警告やメッセージは出ていませんでした。送信しないだけです。

そのプロップをvalidator={() => ({})}に置き換えます。つまり、空のオブジェクトのみが返されます。検証に合格し、onSubmitがトリガーされます。そこから機能を復元できます。

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