Formik onSubmit 函数不适用于我的代码

Posted 2023-02-22

【中文标题】Formik onSubmit 函数不适用于我的代码

【英文标题】：Formik onSubmit function is not working on my code

【发布时间】：2019-08-09 18:32:46

【问题描述】：

我正在使用 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>

在这个 formik 表单中，onSubmit 函数不起作用。我不知道为什么？请告诉我，我的代码有什么问题？

【问题讨论】：

你的意思是它坏了，还是根本没有调用onSubmit方法？我认为您应该调用onSubmit 方法的第二个参数actions，并使用actions.setSubmitting 而不仅仅是setSubmitting，因为它是一个传递给它的对象，而不是一个函数。

@Tholle onSubmit 不起作用。我已经完成了 actions.setSubmitting 但没有起作用。

我试图运行你的代码，并且你没有提供的位被剥离它确实有效：codesandbox.io/s/formik-example-3kdov?fontsize=14 所以我删除了：component=CustomInput 并将所有其他自定义组件更改为 div ，并更改了您没有提供的验证模式。也许问题出在您的 CustomInput 或验证中？

删除验证模式并检查，我的意思是validationSchema: null。

我遇到了类似的问题，删除验证模式帮助我解决了这个问题。我想我需要检查我是否有任何未评估的字段。

【参考方案1】：

我从react-bootstrap 导入Form 而不是formik，所以我遇到了这个问题。通过导入formik 的Form 解决了这个问题。有时，直接使用 react-bootstrap 的 Form.Control 而不是 formik 的 Field 也会出现这个问题。

如果你真的必须使用Form.Control，你可以使用render prop。

【参考方案2】：

最初的问题有点晚了，但我遇到了同样的问题，解决起来很容易但很难找到。

当我将“name”属性传递给组件时，我写的是“DateOfBirth”而不是小写，这意味着它与我的validationSchema 不匹配。

我的架构如下所示：

export const userSchema = yup.object().shape(
firstName: yup.string().min(1).max(50).required('Field is required'), 
lastName: yup.string().min(1).max(50).required('Field is required'), 
dateOfBirth: yup.date().required('Invalid input'),);

这意味着组件的名称必须匹配

之前（没用）：

 <DateTimePicker name="DateOfBirth" label="Date of birth" />

之后（工作）：

<DateTimePicker name="dateOfBirth" label="Date of birth" />

【讨论】：

谢谢，朋友！这也是我的问题！

【参考方案3】：

就我而言，onSubmit 不起作用，因为我忘记将表单包装在 <form></form> 标记中。一个愚蠢的问题，但这可能是这种行为的原因。如果上述解决方案不起作用，请检查您是否有 form 标签。

【讨论】：

同样的问题，太健忘了！

【参考方案4】：

在我为我工作时使用而不是按钮标签。

【讨论】：

这是 *** 有史以来最好的答案。

【参考方案5】：

在我的例子中，我使用Yup 作为验证器，我不小心在我的validationSchema 中有firstName 和lastName，但我的表单中没有这些值。

我的validationSchema 是，

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

我刚刚删除了firstName和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')
)

所以请检查您的validationSchema，看看您是否需要表单中不存在的东西。

【讨论】：

你让我这么头疼。谢谢

man 这行得通，但想一想，我希望它应该忽略该验证

【参考方案6】：

检查您的validationSchema。我遇到了这个问题，发现我的验证器返回的东西向 Formik 发出了表单无效的信号，但没有出现其他警告或消息。它只是不会提交。

用validator=() => () 替换该道具，即只返回一个空对象。那应该通过验证并触发您的 onSubmit。您可以从那里恢复您的功能。

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

【讨论】：

感谢这解决了我的问题！我正在使用 Yup 并根据需要进行了额外的字段验证设置，该设置未链接到任何字段，因此它从未通过验证。

@AlexP 嘿，我遇到了类似的问题。请问您是如何解决问题的。

应该有某种类型的通知。一点都不明显

一个错误不会在那里受到伤害。谢谢，克里斯识别这个

谢谢！有这个错误，它让我发疯了很长时间。绝对是个棘手的问题。