咨询Formik是否有全局onChange类事件，批量追踪字段变更并自动提交

Formik本身就提供了你需要的全局字段变更监听能力——组件的onChange prop，它会在所有字段值发生变更时触发，不管是用户直接输入修改，还是通过setFieldValue/setValues这类API手动更新，都能被捕获到，完全不需要为每个字段单独设置onChange事件。

针对你需要的「停止输入60秒后自动提交」需求，可以通过以下步骤实现：

• 用useRef存储定时器ID，避免每次渲染丢失引用
• 在onChange回调中，先清除上一次的定时器（如果存在），再重新设置60秒的新定时器
• 定时器到期时，调用Formik提供的submitForm方法完成自动提交
• 组件卸载时清除定时器，防止内存泄漏

完整代码示例：

import { Formik, Form, Field } from 'formik';
import { useRef, useEffect } from 'react';
import * as Yup from 'yup';

const validationSchema = Yup.object({
  name: Yup.string().required('必填'),
  phone: Yup.string().required('必填'),
  email: Yup.string().email('格式错误').required('必填'),
});

const AutoSaveForm = () => {
  // 存储定时器ID
  const submitTimerRef = useRef(null);

  // 组件卸载时清除定时器
  useEffect(() => {
    return () => {
      if (submitTimerRef.current) {
        clearTimeout(submitTimerRef.current);
      }
    };
  }, []);

  return (
    <Formik
      initialValues={{
        name: '',
        phone: '',
        email: '',
      }}
      validationSchema={validationSchema}
      onSubmit={(values) => {
        // 这里写实际提交到服务器的逻辑
        console.log('自动提交表单:', values);
        // 示例：fetch('/api/submit', { method: 'POST', body: JSON.stringify(values) })
      }}
      onChange={({ submitForm }) => {
        // 清除上一次的定时器
        if (submitTimerRef.current) {
          clearTimeout(submitTimerRef.current);
        }
        // 设置新的60秒定时器，到期后执行提交
        submitTimerRef.current = setTimeout(() => {
          submitForm();
        }, 60000);
      }}
    >
      {({ setFieldValue }) => (
        <Form>
          <div>
            <label>姓名</label>
            <Field name="name" type="text" />
          </div>
          <div>
            <label>电话</label>
            <Field name="phone" type="tel" />
          </div>
          <div>
            <label>邮箱</label>
            <Field name="email" type="email" />
          </div>
          {/* 测试setFieldValue触发的变更 */}
          <button
            type="button"
            onClick={() => setFieldValue('name', '测试自动变更')}
          >
            手动修改姓名
          </button>
        </Form>
      )}
    </Formik>
  );
};

export default AutoSaveForm;

关键细节说明 #

• onChange回调的参数中包含submitForm方法，直接调用就能触发Formik的提交流程（会自动走验证逻辑，验证通过才会执行onSubmit）
• 每次字段变更都会重置定时器，确保只有用户停止输入满60秒才会提交
• useRef存储定时器ID，保证在组件多次渲染时能正确清除旧定时器
• 组件卸载时清除定时器，避免无效的定时器继续占用资源

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