Parcourir la source

♻️ refactor(ChildGoodsInlineEditForm): 重构表单提交逻辑

- 将 `handleSubmit` 从 `form.handleSubmit` 回调重构为独立的异步函数
- 在提交前手动触发表单验证 (`form.trigger()`),验证失败时记录日志并提前返回
- 验证通过后使用 `form.getValues()` 获取表单数据
- 移除 `<form>` 标签的 `onSubmit` 属性,改为在保存按钮的 `onClick` 事件中调用新的 `handleSubmit` 函数
- 为保存按钮添加 `type="button"` 并阻止事件冒泡,以更精确地控制提交行为
yourname il y a 1 mois
Parent
commit
e174e33b85

+ 19 - 6
packages/goods-management-ui-mt/src/components/ChildGoodsInlineEditForm.tsx

@@ -71,7 +71,14 @@ export const ChildGoodsInlineEditForm: React.FC<ChildGoodsInlineEditFormProps> =
   });
 
   // 处理表单提交
-  const handleSubmit = form.handleSubmit(async (data) => {
+  const handleSubmit = async () => {
+    const isValid = await form.trigger();
+    if (!isValid) {
+      console.debug('表单验证失败');
+      return;
+    }
+
+    const data = form.getValues();
     // 准备更新数据 - 直接使用验证后的数据
     const updateData = {
       name: data.name,
@@ -83,13 +90,11 @@ export const ChildGoodsInlineEditForm: React.FC<ChildGoodsInlineEditFormProps> =
     };
 
     await onSave(child.id, updateData);
-  }, (errors) => {
-    console.debug('表单验证错误:', errors);
-  });
+  };
 
   return (
     <Form {...form}>
-      <form onSubmit={handleSubmit} className="space-y-4">
+      <form className="space-y-4">
         <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
           {/* 商品名称 */}
           <FormField
@@ -239,7 +244,15 @@ export const ChildGoodsInlineEditForm: React.FC<ChildGoodsInlineEditFormProps> =
             <X className="h-4 w-4 mr-2" />
             取消
           </Button>
-          <Button type="submit" disabled={isLoading}>
+          <Button
+            type="button"
+            disabled={isLoading}
+            onClick={async (e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              await handleSubmit();
+            }}
+          >
             <Save className="h-4 w-4 mr-2" />
             {isLoading ? '保存中...' : '保存'}
           </Button>