单页面中使用多个Formik表单：提交按钮失效问题求助

当然可以在同一个页面中使用多个独立的Formik表单，你遇到的提交按钮失效问题，通常和表单作用域、结构或配置错误有关，而非多表单本身的限制。以下是常见问题的排查和解决方法：

常见问题及解决方案 #

1. 确保每个Formik实例完全独立 #

每个Formik组件必须拥有自己专属的initialValues、onSubmit处理函数，且表单字段的name不要跨表单重复：

// 第一个独立表单
<Formik
  initialValues={{ email: '' }}
  onSubmit={(values, { setSubmitting }) => {
    console.log('表单1提交数据:', values);
    setSubmitting(false);
  }}
>
  {({ handleSubmit }) => (
    <form onSubmit={handleSubmit}>
      <Field name="email" type="email" placeholder="输入邮箱" />
      <button type="submit">提交表单1</button>
    </form>
  )}
</Formik>

// 第二个独立表单
<Formik
  initialValues={{ password: '' }}
  onSubmit={(values, { setSubmitting }) => {
    console.log('表单2提交数据:', values);
    setSubmitting(false);
  }}
>
  {({ handleSubmit }) => (
    <form onSubmit={handleSubmit}>
      <Field name="password" type="password" placeholder="输入密码" />
      <button type="submit">提交表单2</button>
    </form>
  )}
</Formik>

注意：不要将一个Formik的handleSubmit传递给另一个表单的form标签，这会导致提交逻辑混乱。

2. 检查提交按钮的type属性 #

确保提交按钮的type为"submit"，而非"button"——后者不会触发表单的默认提交行为：

// 正确写法
<button type="submit">提交表单</button>

// 错误写法（不会触发Formik提交）
<button type="button">提交表单</button>

3. 禁止表单嵌套 #

HTML规范不允许表单嵌套，如果你的两个Formik表单的<form>标签存在嵌套关系，会直接导致提交行为失效。检查DOM结构，确保两个表单是同级元素，无嵌套。

4. 排查验证逻辑是否阻止提交 #

如果Formik的validate函数或validationSchema返回了错误信息，表单会自动阻止提交。可以临时移除验证逻辑，测试提交是否正常，再逐步排查验证规则的问题：

// 临时移除验证测试
<Formik
  initialValues={{ email: '' }}
  // 注释掉validate或validationSchema
  // validate={(values) => { /* ... */ }}
  onSubmit={(values) => console.log('提交成功')}
>
  {/* ... */}
</Formik>

5. 无需手动使用refs控制提交 #

Formik已经封装了完整的提交逻辑，无需通过refs手动触发提交。如果之前使用了refs，建议移除，改用Formik提供的handleSubmit或submitForm方法即可。

内容的提问来源于stack exchange，提问作者fa rahimian