Formik表单提交按钮点击无响应问题排查与修复

云原生阿岚

2026-7-12

问题排查与修复方案

核心问题1：提交按钮触发逻辑冲突

你的提交按钮同时设置了type="submit"和onClick={handleSubmit}，这会打乱Formik的内部提交流程。点击按钮时，既触发表单默认的submit事件，又手动调用handleSubmit，导致handleFormSubmit无法正常触发。

核心问题2：潜在的验证拦截（可选排查点）

如果userSchema的验证规则被修改，或表单字段存在未通过验证的情况（比如必填项为空、格式不匹配），Formik会自动阻止提交，handleFormSubmit也不会执行。

修复代码

步骤1：修正提交按钮

移除按钮上的onClick={handleSubmit}，仅保留type="submit"：

<Button color="success" variant="outlined" type="submit">Enregistrer</Button>

步骤2：验证表单规则（可选）

检查userSchema的验证逻辑：

确认必填字段都配置了required规则
日期、手机号等格式验证规则是否与输入值匹配
可临时注释validationSchema={userSchema}，测试是否能正常提交

步骤3：优化初始值初始化（可选）

避免初始值结构不匹配导致的表单状态异常：

const [initialValues, setInitialValues] = useState(() => {
  if (!user) return initialState;
  return {
    ...user,
    birthday: dateFormat(user.birthday),
    contractStartDate: dateFormat(user.contractStartDate),
    contractEndDate: dateFormat(user.contractEndDate),
  };
});

useEffect(() => {
  if (!user) return;
  const formattedResponse = {
    ...user,
    birthday: dateFormat(user.birthday),
    contractStartDate: dateFormat(user.contractStartDate),
    contractEndDate: dateFormat(user.contractEndDate),
  };
  setInitialValues(formattedResponse);
}, [user]);