Formik自定义SaveButton无法触发表单提交问题求助

核心问题分析 #

你的自定义按钮同时设置了type="submit"和onClick={submitFunc}，这会导致Formik的表单提交流程冲突：

• type="submit"的按钮点击后会触发<form>的onSubmit事件（即你传入的handleSubmit）
• 同时onClick手动调用submitForm，相当于同时触发两次提交逻辑，Formik内部状态因此异常，最终导致提交无响应。

另外，submitForm是Formik提供的手动触发提交方法，不需要配合type="submit"按钮使用，二者选其一即可。

解决方案一：移除onClick，依赖submit类型按钮的默认行为 #

修改SaveButton组件，去掉onClick绑定，让按钮的type="submit"自然触发表单的handleSubmit：

interface ISaveButton {
  disabled?: boolean;
}

const SaveButton = ({ 
  disabled = false,
 }: ISaveButton) => {
  const { t } = useTranslation('common'); 
  
  return (
    <button
      type='submit'
      disabled={disabled}
      className="flex items-center justify-center gap-1 w-[160px] py-[10px] h-[52px] rounded text-lg leading-normal text-center text-white bg-green-600 border-2 border-solid border-green-600 transition-colors duration-300 ease-linear cursor-pointer disabled:bg-[#aaa6a5] disabled:cursor-default"
    >
    <SaveIcon className="w-6 h-6 fill-white" />
    <span>{t('form-button-save')}</span>
    </button>
  );
};

在TagForm中直接使用按钮，无需传入submitFunc：

<SaveButton disabled={isLoading} />

这种方式符合HTML表单原生逻辑，Formik的handleSubmit会自动处理验证、调用onSubmit等流程。

解决方案二：改为type="button"，手动调用submitForm #

如果需要保留手动调用submitForm的逻辑，将按钮type改为button，避免触发表单默认提交事件：

修改SaveButton组件：

interface ISaveButton {
  submitFunc: () => void;
  disabled?: boolean;
}

const SaveButton = ({ 
  submitFunc, 
  disabled = false,
 }: ISaveButton) => {
  const { t } = useTranslation('common'); 
  
  return (
    <button
      type='button'
      onClick={submitFunc}
      disabled={disabled}
      className="flex items-center justify-center gap-1 w-[160px] py-[10px] h-[52px] rounded text-lg leading-normal text-center text-white bg-green-600 border-2 border-solid border-green-600 transition-colors duration-300 ease-linear cursor-pointer disabled:bg-[#aaa6a5] disabled:cursor-default"
    >
    <SaveIcon className="w-6 h-6 fill-white" />
    <span>{t('form-button-save')}</span>
    </button>
  );
};

TagForm中的调用方式保持不变即可。

额外排查点 #

1. 验证Schema是否通过：检查TagValidation()返回的规则是否存在未满足的条件，Formik会在验证不通过时阻止onSubmit执行。可在TagForm中打印errors和touched确认是否有隐藏验证错误：

   console.log('errors:', errors);
   console.log('touched:', touched);
   

2. 检查isLoading状态：确认点击按钮时isLoading为false，避免按钮被意外禁用。
3. Formik初始化是否正确：确保useFormik的initialValues结构与IEditAssetBodyData完全匹配，缺失字段可能导致验证或提交异常。

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