Formik提交时如何阻止字段标记为.touched并重置touched为空对象

方案1：使用Formik原生配置（最推荐） #

Formik 原生提供了 touchOnSubmit 配置项，默认值为true，专门用于控制提交表单时是否自动将所有字段标记为touched状态。你只需要将其设置为false，即可直接关闭默认行为，完全匹配你的需求：

• 提交时不会自动触碰所有字段，touched 仅保留用户实际操作产生的记录
• 表单校验逻辑不受影响，errors 对象会正常填充

useFormik 钩子用法示例：

import { useFormik } from 'formik';
import * as Yup from 'yup';

const formik = useFormik({
  initialValues: {
    // 你的表单初始值
  },
  validationSchema: Yup.object({
    // 你的校验规则
  }),
  touchOnSubmit: false, // 新增这一行即可
  onSubmit: (values) => {
    // 你的提交逻辑
  }
})

Formik 组件用法示例：

import { Formik, Form } from 'formik';
import * as Yup from 'yup';

<Formik
  initialValues={{
    // 你的表单初始值
  }}
  validationSchema={Yup.object({
    // 你的校验规则
  })}
  touchOnSubmit={false} // 新增这一行即可
  onSubmit={(values) => {
    // 你的提交逻辑
  }}
>
  <Form>
    {/* 表单字段内容 */}
  </Form>
</Formik>

方案2：提交完成后手动重置touched（特殊场景使用） #

如果因为业务逻辑需要保留touchOnSubmit的默认行为，仅需要在提交后清空touched，可以通过Formik提供的useFormikContext钩子轻松实现，不需要自行维护上下文：

import { useFormikContext } from 'formik';
import { useEffect } from 'react';

// 把这个组件放到Formik组件内部即可生效
const TouchedResetter = () => {
  const { setTouched, isSubmitting } = useFormikContext();

  useEffect(() => {
    // 提交流程结束后重置touched为空对象
    if (!isSubmitting) {
      setTouched({});
    }
  }, [isSubmitting, setTouched]);

  return null;
}

内容的提问来源于stack exchange，提问作者gene b.