Formik handleSubmit未触发，表单未验证就跳转至第二步问题

核心问题 #

你自定义的handleSubmit里直接调用formik.handleSubmit后立刻执行if/else判断，这是因为Formik的表单验证是异步执行的——formik.handleSubmit调用后会先触发验证流程，但不会阻塞后续代码，所以你的if/else会在验证完成前就跑起来，自然跳过验证直接加载第二部分。

而把handleShow(true)放在Formik自带的onSubmit回调里时，Formik会自动保证：只有当Yup验证完全通过后，才会执行这个onSubmit里的代码，所以验证能正常工作。

解决方法 #

方法1：直接复用Formik的onSubmit（最推荐）

既然这个方式本身就能正常工作，没必要额外套一层自定义handleSubmit。直接把切换第二部分的逻辑写在Formik的onSubmit里：

<Formik
  validationSchema={yourFirstPartSchema}
  onSubmit={(values, actions) => {
    // 验证通过后才会走到这里
    handleShow(true);
    // 如果需要提交数据，也可以在这里处理
    // api.submit(values)
  }}
>
  {/* 第一部分表单内容 */}
</Formik>

方法2：如果必须用自定义handleSubmit

你需要手动触发Formik的验证，并在验证通过后再执行逻辑。可以用Formik提供的validateForm方法：

const customHandleSubmit = async () => {
  // 手动触发表单验证
  const errors = await formik.validateForm();
  // 如果没有错误（验证通过）
  if (Object.keys(errors).length === 0) {
    handleShow(true);
    // 也可以手动调用formik的submit逻辑
    formik.handleSubmit();
  }
};

// 在表单按钮上绑定这个自定义方法
<button onClick={customHandleSubmit}>进入下一步</button>

补充说明

Formik的handleSubmit内部逻辑是：

1. 触发表单验证（基于Yup的schema）
2. 如果验证失败，设置errors和touched状态，不执行onSubmit
3. 如果验证通过，才会调用你传入的onSubmit回调

所以你之前的自定义handleSubmit相当于绕开了这个流程，直接在验证完成前就执行了切换逻辑，才导致验证失效。

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