feat(Field): useWatch

guoyunhe · Nov 30, 2023 · 53f15f7 · 53f15f7
1 parent d3ef446
commit 53f15f7
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 6 deletions.
diff --git a/src/field/index.js b/src/field/index.js
@@ -1,4 +1,4 @@
-import { useState, useMemo } from 'react';
+import { useState, useMemo, useEffect } from 'react';
 import Field from '@alifd/field';
 
 import { log } from '../util';
@@ -13,6 +13,14 @@ class NextField extends Field {
         return this.getUseField({ useMemo, useState })(options);
     }
 
+    static useWatch(field, name) {
+        if (!useState || !useEffect) {
+            log.warning('need react version > 16.8.0');
+            return;
+        }
+        return this.getUseWatch({ useEffect, useState })(field, name);
+    }
+
     constructor(com, options = {}) {
         const newOptions = Object.assign({}, options, {
             afterValidateRerender: scrollToFirstError,

diff --git a/types/field/index.d.ts b/types/field/index.d.ts
@@ -4,7 +4,7 @@ import { FieldOption } from '@alifd/field';
 import innerField from '@alifd/field';
 
 export * from '@alifd/field';
-export default class Field extends innerField{
+export default class Field extends innerField {
     /**
      *
      * @param contextComp 传入调用class的this
@@ -23,14 +23,17 @@ export default class Field extends innerField{
      * @param names
      * @param callback
      */
-    validate(
-        names?: string[] | string,
-        callback?: (errors: object[], values: object) => void
-    ): void;
+    validate(names?: string[] | string, callback?: (errors: object[], values: object) => void): void;
 
     /**
      * react hooks 风格使用 Field
      * @param options
      */
     static useField(options?: FieldOption): Field;
+
+    /**
+     * 将 Field 的 Value 转换为 React 的 State
+     * @param options
+     */
+    static useField<T>(field: Field, name: string): T;
 }