表单提交

提交阶段

要在 Formik 中提交表单,您需要以某种方式触发提供的 handleSubmit(e)submitForm 属性。每次调用其中任何一个方法时,Formik 都会执行以下操作(伪代码)

提交前

  • 触碰所有字段。需要 initialValues,并且应始终指定。请参阅 #445
  • isSubmitting 设置为 true
  • submitCount 加 1

验证

  • isValidating 设置为 true
  • 异步运行所有字段级验证、validatevalidationSchema,并深度合并结果
  • 有任何错误吗?
    • 是:中止提交。将 isValidating 设置为 false,设置 errors,将 isSubmitting 设置为 false
    • 否:将 isValidating 设置为 false,继续执行“提交”

提交

  • 继续运行提交处理程序(即 onSubmithandleSubmit
  • 提交处理程序是否返回 Promise?
    • 是:等待其 resolved 或 rejected,然后将 setSubmitting 设置为 false
    • 否:调用 setSubmitting(false) 以完成循环

常见问题

如何确定我的提交处理程序是否正在执行?

如果 isValidatingfalseisSubmittingtrue

为什么 Formik 在提交前会触碰所有字段?

通常的做法是仅在访问过输入(又名“touched”)时在 UI 中显示输入的错误。在提交表单之前,Formik 会触碰所有字段,以便所有可能隐藏的错误现在都可见。

如何防止重复提交?

如果 isSubmittingtrue,则禁用触发提交的任何内容。

如何知道表单在提交前是否正在进行验证?

如果 isValidatingtrueisSubmittingtrue

为什么提交后 `isSubmitting` 保持为 true?如果提交处理程序返回 Promise,请确保在调用时正确 resolved 或 rejected。

如果提交处理程序不返回 Promise,请确保在处理程序的末尾调用 setSubmitting(false)

此页面是否有帮助?

订阅我们的时事通讯

最新的 Formik 新闻、文章和资源,发送到您的收件箱。

版权所有 © 2020 Formium, Inc. 保留所有权利。