Formik组件草稿按钮点击无校验，发布按钮触发后恢复正常

你遇到的问题本质是React Hook Form的校验机制导致的：

• 默认情况下，isValid 状态仅在表单完成一次校验动作后才会返回准确值，首次点击草稿按钮时，表单未触发任何校验，isValid 保持初始状态（通常为true），同时字段的touched标记未被激活，错误提示不会显示。
• 点击发布按钮后，触发了表单的校验流程（无论是通过submit事件还是手动调用校验），此时isValid和touched状态被正确更新，后续点击草稿按钮时就能正常判断校验结果。

最直接的修复方式是手动触发全量校验，修改草稿按钮的onClick逻辑：

onClick={async () => {
  // 触发所有字段的校验，返回校验结果
  const isValid = await trigger();
  if (isValid) {
    addToDraft(values);
  }
}}

这样首次点击草稿按钮时，会先执行全量校验：

1. 更新errors和touched状态，自动显示字段的错误提示
2. 根据真实的校验结果决定是否执行addToDraft

如果希望更贴合表单提交的原生逻辑，也可以将草稿按钮改为submit类型，通过标记动作区分处理：

// 新增状态标记动作类型
const [isDraft, setIsDraft] = useState(false);

// 草稿按钮
<Button
  // ...其他属性
  type="submit"
  onClick={() => setIsDraft(true)}
/>

// 发布按钮
<Button
  // ...其他属性
  type="submit"
  onClick={() => setIsDraft(false)}
/>

// Form组件的onSubmit绑定
<Form onSubmit={handleSubmit((data) => {
  if (isDraft) {
    addToDraft(data);
  } else {
    // 执行发布帖子的逻辑
  }
})}>

这种方式利用表单提交的自动校验机制，无需手动调用trigger，校验通过后才会执行对应的业务逻辑。

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