Browse Source

feat: formApi add getFormProps export (#2184)

* feat: formApi add getFormProps export
pointhalo 1 year ago
parent
commit
46c87cc8d9

+ 1 - 0
content/input/form/index-en-US.md

@@ -2109,6 +2109,7 @@ The table below describes the features available in the formApi.
 
 
 | Function      | Description                                                                        | example                                                                                                                       |
 | Function      | Description                                                                        | example                                                                                                                       |
 | ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |-------------------------------------------------------------------------------------------------------------------------------|
 | ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |-------------------------------------------------------------------------------------------------------------------------------|
+| getFormProps  | Get Form Component Props, support after v2.57.0                                                                                                                                                                                                                                                                                                                      | formApi.getFormProps(propNames?: string[])                                                                                                        |
 | getFormState  | Get FormState                                                                                                                                                                                                                                                                                                                      | formApi.getFormState()                                                                                                        |
 | getFormState  | Get FormState                                                                                                                                                                                                                                                                                                                      | formApi.getFormState()                                                                                                        |
 | submitForm    | Manually submit form operation                                                                                                                                                                                                                                                                                               | formApi.submitForm()                                                                                                          |
 | submitForm    | Manually submit form operation                                                                                                                                                                                                                                                                                               | formApi.submitForm()                                                                                                          |
 | reset         | Reset the form manually                                                                                                                                                                                                                                                                                                            | formApi.reset(fields?: Array <string\>)                                                                                      |
 | reset         | Reset the form manually                                                                                                                                                                                                                                                                                                            | formApi.reset(fields?: Array <string\>)                                                                                      |

+ 18 - 16
content/input/form/index.md

@@ -2107,6 +2107,7 @@ FormState 存储了所有 Form 内部的状态值,包括各表单控件的值
 
 
 | Function      | 说明                                                                                                                                                                                                                             | example                                                                                                             |
 | Function      | 说明                                                                                                                                                                                                                             | example                                                                                                             |
 | ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |---------------------------------------------------------------------------------------------------------------------|
 | ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |---------------------------------------------------------------------------------------------------------------------|
+| getFormProps  | 获取 Form 组件上当前所有props的值,例如可用于读取 disabled 等。v 2.57.0 后提供                                                    | formApi.getProps(propNames?: string[])                                                                                              |
 | getFormState  | 获取 FormState                                                                                                                                                                                                                   | formApi.getFormState()                                                                                              |
 | getFormState  | 获取 FormState                                                                                                                                                                                                                   | formApi.getFormState()                                                                                              |
 | submitForm    | 可手动触发 submit 提交操作                                                                                                                                                                                                       | formApi.submitForm()                                                                                                |
 | submitForm    | 可手动触发 submit 提交操作                                                                                                                                                                                                       | formApi.submitForm()                                                                                                |
 | reset         | 可手动对 form 进行重置                                                                                                                                                                                                           | formApi.reset(fields?: Array <string\>)                                                                             |
 | reset         | 可手动对 form 进行重置                                                                                                                                                                                                           | formApi.reset(fields?: Array <string\>)                                                                             |
@@ -2135,6 +2136,23 @@ FormState 存储了所有 Form 内部的状态值,包括各表单控件的值
 import React from 'react';
 import React from 'react';
 import { Form, Button } from '@douyinfe/semi-ui';
 import { Form, Button } from '@douyinfe/semi-ui';
 
 
+() => {
+    // 函数式组件通过useRef存储formApi
+    const api = useRef();
+
+    return (
+        <Form getFormApi={formApi => api.current = formApi}>
+            <Form.Input field='a' />
+            <Button onClick={()=>{console.log(api);}}>log</Button>
+        </Form>
+    );
+};
+```
+
+```jsx
+import React from 'react';
+import { Form, Button } from '@douyinfe/semi-ui';
+
 class FormApiDemo extends React.Component {
 class FormApiDemo extends React.Component {
     constructor() {
     constructor() {
         super();
         super();
@@ -2168,22 +2186,6 @@ class FormApiDemo extends React.Component {
 }
 }
 ```
 ```
 
 
-```jsx
-import React from 'react';
-import { Form, Button } from '@douyinfe/semi-ui';
-
-() => {
-    // 函数式组件通过useRef存储formApi
-    const api = useRef();
-
-    return (
-        <Form getFormApi={formApi => api.current = formApi}>
-            <Form.Input field='a' />
-            <Button onClick={()=>{console.log(api);}}>log</Button>
-        </Form>
-    );
-};
-```
 
 
 ## Field Props
 ## Field Props
 
 

+ 1 - 0
packages/semi-foundation/form/foundation.ts

@@ -613,6 +613,7 @@ export default class FormFoundation extends BaseFoundation<BaseFormAdapter> {
             getValue: (field?: string) => this.getValue(field, { needClone: true }),
             getValue: (field?: string) => this.getValue(field, { needClone: true }),
             getValues: () => this.getValue(undefined, { needClone: true }),
             getValues: () => this.getValue(undefined, { needClone: true }),
             getFormState: () => this.getFormState(true),
             getFormState: () => this.getFormState(true),
+            getFormProps: (props?: Array<string>) => this.getFormProps(props),
             getInitValue: (field: string) => this.getInitValue(field),
             getInitValue: (field: string) => this.getInitValue(field),
             getInitValues: () => this.getInitValues(),
             getInitValues: () => this.getInitValues(),
             getTouched: (field?: string) => this.getTouched(field),
             getTouched: (field?: string) => this.getTouched(field),