新增 useForm hook 获取 form 实例 & 支持 initialData 全局设置初始值

src/form/Form.tsx

@@ -3,8 +3,9 @@ import classNames from 'classnames';
 import useConfig from '../hooks/useConfig';
 import noop from '../_util/noop';
 import forwardRefWithStatics from '../_util/forwardRefWithStatics';
-import type { TdFormProps, FormInstanceFunctions } from './type';
+import type { TdFormProps } from './type';
 import useInstance from './hooks/useInstance';
+import useForm from './hooks/useForm';
 import { StyledProps } from '../common';
 import FormContext from './FormContext';
 import FormItem from './FormItem';
@@ -15,29 +16,27 @@ export interface FormProps extends TdFormProps, StyledProps {
   children?: React.ReactNode;
 }
 
-export interface FormRefInterface extends React.RefObject<unknown>, FormInstanceFunctions {
-  currentElement: HTMLFormElement;
-}
-
 const Form = forwardRefWithStatics(
   (props: FormProps, ref) => {
     const { classPrefix, form: globalFormConfig } = useConfig();
 
     const {
       style,
       className,
-      labelWidth = '100px',
+      form,
+      labelWidth,
       statusIcon,
-      labelAlign = 'right',
-      layout = 'vertical',
-      colon = false,
+      labelAlign,
+      layout,
+      colon,
+      initialData,
       requiredMark = globalFormConfig.requiredMark,
       scrollToFirstError,
-      showErrorMessage = true,
-      resetType = 'empty',
+      showErrorMessage,
+      resetType,
       rules,
       errorMessage = globalFormConfig.errorMessage,
-      preventSubmitDefault = true,
+      preventSubmitDefault,
       disabled,
       children,
       onReset,
@@ -50,47 +49,20 @@ const Form = forwardRefWithStatics(
 
     const formRef: React.RefObject<HTMLFormElement> = useRef();
     const formMapRef = useRef(new Map()); // 收集所有 formItem 实例
+    const formInstance = useInstance(props, formRef, formMapRef);
 
-    const {
-      submit,
-      reset,
-      getFieldValue,
-      getFieldsValue,
-      setFieldsValue,
-      setFields,
-      validate,
-      validateOnly,
-      clearValidate,
-      setValidateMessage,
-    } = useInstance(props, formRef, formMapRef);
-
-    useImperativeHandle(ref as FormRefInterface, () => ({
-      currentElement: formRef.current,
-      submit,
-      reset,
-      getFieldValue,
-      getFieldsValue,
-      setFieldsValue,
-      setFields,
-      validate,
-      validateOnly,
-      clearValidate,
-      setValidateMessage,
-    }));
+    useImperativeHandle(ref, () => formInstance);
+    form && Object.assign(form, { ...formInstance });
 
     function onResetHandler(e: React.FormEvent<HTMLFormElement>) {
-      if (preventSubmitDefault) {
-        e.preventDefault?.();
-        e.stopPropagation?.();
-      }
       [...formMapRef.current.values()].forEach((formItemRef) => {
         formItemRef?.current.resetField();
       });
       onReset?.({ e });
     }
 
     function onFormItemValueChange(changedValue: Record<string, unknown>) {
-      const allFields = getFieldsValue(true);
+      const allFields = formInstance.getFieldsValue(true);
       onValuesChange(changedValue, allFields);
     }
 
@@ -110,6 +82,7 @@ const Form = forwardRefWithStatics(
           labelAlign,
           layout,
           colon,
+          initialData,
           requiredMark,
           errorMessage,
           showErrorMessage,
@@ -125,7 +98,7 @@ const Form = forwardRefWithStatics(
           ref={formRef}
           style={style}
           className={formClass}
-          onSubmit={submit}
+          onSubmit={formInstance.submit}
           onReset={onResetHandler}
           onKeyDown={onKeyDownHandler}
         >
@@ -134,7 +107,7 @@ const Form = forwardRefWithStatics(
       </FormContext.Provider>
     );
   },
-  { FormItem, FormList },
+  { useForm, FormItem, FormList },
 );
 
 Form.displayName = 'Form';

src/form/FormContext.tsx

@@ -8,6 +8,7 @@ const FormContext = React.createContext<{
   labelAlign: TdFormProps['labelAlign'];
   layout: TdFormProps['layout'];
   colon: TdFormProps['colon'];
+  initialData: TdFormProps['initialData'];
   requiredMark: TdFormProps['requiredMark'];
   scrollToFirstError: TdFormProps['scrollToFirstError'];
   showErrorMessage: TdFormProps['showErrorMessage'];
@@ -22,6 +23,7 @@ const FormContext = React.createContext<{
   labelAlign: 'right',
   layout: 'vertical',
   colon: false,
+  initialData: {},
   requiredMark: true,
   scrollToFirstError: undefined,
   showErrorMessage: true,

src/form/FormItem.tsx

@@ -46,6 +46,7 @@ const FormItem = forwardRef<FormItemInstance, FormItemProps>((props, ref) => {
   const {
     colon,
     layout,
+    initialData: initialDataFromContext,
     requiredMark: requiredMarkFromContext,
     labelAlign: labelAlignFromContext,
     labelWidth: labelWidthFromContext,
@@ -85,7 +86,15 @@ const FormItem = forwardRef<FormItemInstance, FormItemProps>((props, ref) => {
   const [verifyStatus, setVerifyStatus] = useState('validating');
   const [resetValidating, setResetValidating] = useState(false);
   const [needResetField, setNeedResetField] = useState(false);
-  const [formValue, setFormValue] = useState(getDefaultInitialData(children, initialData));
+  const [formValue, setFormValue] = useState(
+    getDefaultInitialData({
+      name,
+      formListName,
+      children,
+      initialData,
+      initialDataFromContext,
+    }),
+  );
 
   const currentFormItemRef = useRef<FormItemInstance>(); // 当前 formItem 实例
   const innerFormItemsRef = useRef([]);
@@ -261,7 +270,13 @@ const FormItem = forwardRef<FormItemInstance, FormItemProps>((props, ref) => {
 
   function getResetValue(resetType: string): ValueType {
     if (resetType === 'initial') {
-      return getDefaultInitialData(children, initialData);
+      return getDefaultInitialData({
+        name,
+        formListName,
+        children,
+        initialData,
+        initialDataFromContext,
+      });
     }
 
     let emptyValue: ValueType = '';