fix(Form): 新增getFieldValue & setFieldValue & resetFieldValue等方法

Author: ChenlingasMx

example/examples/src/routes/Form/index.tsx

@@ -16,7 +16,7 @@ const FormDemo = () => {
     },
   ];
 
-  const initialValues = {name: '王滴滴'};
+  const initialValues = {name: '王滴滴', age: ''};
 
   const form = Form.useForm();
 
@@ -29,10 +29,17 @@ const FormDemo = () => {
             type="primary"
             onPress={() => {
               const values = form.getStore();
+              const age = form.getFieldValue('age');
               console.log('values', values);
             }}>
             默认按钮
           </Button>
+          <Button type="primary" onPress={() => form.setFieldValue('age', '456')}>
+            设置
+          </Button>
+          <Button type="primary" onPress={() => form.resetFieldValue()}>
+            重置
+          </Button>
         </Body>
         <Footer />
       </Layout>

packages/core/src/Form/form.tsx

@@ -2,7 +2,6 @@ import React, { useEffect, useRef } from 'react';
 import FormItems from './formItems';
 import { Provider } from './hooks/context';
 import { FormProps, KeyType } from './types';
-import useForm from './hooks/useForm';
 
 const Form = <
   FormData extends unknown = any,
@@ -17,9 +16,9 @@ const Form = <
 
   const innerMethods = form.getInnerMethods(true);
 
-  if (!isMount.current) {
-    innerMethods.updateStore({ initialValues: initialValues, store: initialValues });
-  }
+  useEffect(() => {
+    if (!isMount.current) innerMethods.updateStore({ initialValues: initialValues, store: initialValues });
+  }, []);
 
   useEffect(() => {
     isMount.current = true;

packages/core/src/Form/formItems.tsx

@@ -1,19 +1,19 @@
 import React, { FC, useContext, useEffect } from 'react';
-import { FormProps, KeyType, FormItemsProps } from './types';
+import { KeyType, FormItemsProps } from './types';
 import { Context } from './hooks/context';
 import Input from '../Input';
-import { View, Text } from 'react-native';
+import { View, Text, TextInput } from 'react-native';
 
 const FormItems: FC<any> = ({ formDatas = [] }) => {
   const {
-    innerMethods: { store = {}, updateStore },
+    innerMethods: { store = {}, updateStore, forceUpdate, validator },
   } = useContext(Context);
 
   const change = (field: KeyType, value: any) => updateStore?.({ store: { ...store, [field]: value } });
 
-  const validate = async () => {
-    // showMessages();
-    // forceUpdate();
+  const validate = () => {
+    validator.showMessages();
+    forceUpdate();
   };
 
   const _render = () => {
@@ -27,11 +27,11 @@ const FormItems: FC<any> = ({ formDatas = [] }) => {
       return (
         <View key={i}>
           {_render}
-          {/* <Text style={{ color: 'red' }}>
-            {message(v.field, formValues[v.field], {
+          <Text style={{ color: 'red' }}>
+            {validator.message(v.field, store[v.field], {
               validate: v?.validate,
             })}
-          </Text> */}
+          </Text>
         </View>
       );
     });

packages/core/src/Form/hooks/useForm.ts

@@ -1,10 +1,10 @@
 import { KeyType, InnerMethodsReturnType } from '../types';
 import { useState } from 'react';
+import { useValidator } from '@validator.tool/hook';
 
 type State<FormData = any> = {
   store: Partial<FormData>;
   initialValues: Partial<FormData>;
-  errorMessages: Partial<Record<string, string>>;
 };
 
 export default function useForm<
@@ -14,40 +14,65 @@ export default function useForm<
 >(): any {
   const [state, setState] = useState<State>({
     initialValues: {},
-    errorMessages: {},
     store: {},
   });
 
-  const updateStore = (datas: any) => {
+  const { validator, forceUpdate } = useValidator({
+    initValues: { initialValues: state.initialValues },
+  });
+
+  const updateStore = (datas: Partial<any>) => {
     setState({
       ...state,
       ...datas,
     });
   };
 
-  const innerUseValidator = () => {};
-
+  // 获取表单字段的值
   const getFieldValue = (field: FieldKey): FieldValue => {
     const { store } = state;
     return store[field];
   };
 
+  // 设置表单字段的值
+  const setFieldValue = (field: FieldKey, value: FieldValue) => {
+    updateStore({
+      store: {
+        ...state.store,
+        [field]: value,
+      },
+    });
+  };
+
+  // 重置表单
+  const resetFieldValue = () => {
+    updateStore({
+      store: { ...state.initialValues },
+    });
+  };
+
   const getStore = (): Partial<FormData> => {
     const { store } = state;
     return store;
   };
 
   const getFormInstance = () => {
     return {
+      forceUpdate,
+      validator,
       getStore: getStore,
       getFieldValue: getFieldValue,
+      setFieldValue: setFieldValue,
+      resetFieldValue,
       getInnerMethods: (inner?: boolean): InnerMethodsReturnType<FormData, FieldValue, FieldKey> => {
         let methods = {} as any;
         if (inner) {
           methods = {
             store: state.store,
             initialValues: state.initialValues,
             updateStore: updateStore,
+            validator,
+            forceUpdate,
           };
         }
         return methods;

packages/core/src/Form/types/index.tsx

@@ -1,4 +1,5 @@
 import { RulesOption } from '@validator.tool/hook';
+import Validator from 'validator.tool';
 
 type KeyType = string | number | symbol;
 
@@ -10,11 +11,15 @@ export type InnerMethodsReturnType<
   store: Partial<FormData>;
   initialValues: Partial<FormData>;
   updateStore: (value: any) => void;
+  validator: Validator;
+  forceUpdate: () => void;
 };
 
 type FormInstance<FormData = any, FieldValue = FormData[keyof FormData], FieldKey extends KeyType = keyof FormData> = {
   getStore: () => FormData;
-  getFieldValue: () => FieldValue;
+  getFieldValue: (field: FieldKey) => FieldValue;
+  setFieldValue: (field: FieldKey, value: FieldValue) => void;
+  resetFieldValue: () => void;
   getInnerMethods: (inner?: boolean) => InnerMethodsReturnType<FormData, FieldValue, FieldKey>;
 };