-
-
Notifications
You must be signed in to change notification settings - Fork 1.5k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
docs(next/antd): add createAsyncFormActions docs
- Loading branch information
Showing
147 changed files
with
5,730 additions
and
3,864 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,117 @@ | ||
| # createAsyncFormActions | ||
|
|
||
| ## 介绍 | ||
|
|
||
| 声明表单 Actions，用于跨组件通讯，使用该方法创建的所有 Actions 都是会返回一个 | ||
| Promise 对象，可以在任何时机调用 actions，不会出现 actions 未实现的错误 | ||
|
|
||
| ## 类型描述 | ||
|
|
||
| ```typescript | ||
| type createAsyncFormActions() : { | ||
| setFormState(callback : (state : formState)=>void) : Promise, //设置表单状态，目前只支持设置formState.values | ||
| getFormState(callback : (state : formState)=>any)), //获取表单状态 | ||
| setFieldState(name : String,callback : (state : fieldState)=>void) : Promise, //设置表单字段状态，目前支持设置fieldState的所有属性 | ||
| getFieldState(name : String[,callback : (state : fieldState)=>any)]) : Promise,//获取表单字段状态,callback为可选参数 | ||
| reset() : Promise,//重置表单 | ||
| submit() : Promise,//提交表单 | ||
| validate() : Promise,//校验表单 | ||
| getSchema(name : String) : Promise //获取表单Schema | ||
| } | ||
| ``` | ||
|
|
||
| ## formState | ||
|
|
||
| 用于描述整个表单状态的模型对象 | ||
|
|
||
| ```typescript | ||
| type formState { | ||
| values : Object, //表单数据 | ||
| valid : Boolean, //是否合法 | ||
| invalid : Boolean, //是否不合法 | ||
| errors : Array<String>, //错误提示集合 | ||
| pristine : Boolean, //是否是原始态 | ||
| dirty : Boolean //是否存在变化 | ||
| } | ||
| ``` | ||
|
|
||
| ## fieldState | ||
|
|
||
| 用于描述表单字段状态的模型对象 | ||
|
|
||
| ```typescript | ||
| type fieldState { | ||
| value : Any,//字段值 | ||
| valid : Boolean,//字段是否合法 | ||
| invalid : Boolean,//字段是否非法 | ||
| visible : Boolean,//字段显示状态 | ||
| editable : Boolean,//字段是否可编辑 | ||
| loading : Boolean,//字段加载状态 | ||
| errors : Array<String>,//字段错误消息集合 | ||
| pristine : Boolean,//字段是否处于原始态 | ||
| initialValue : Any,//字段初始值 | ||
| name : String,//字段路径 | ||
| path, : Array<String>//字段路径，数组形式 | ||
| props : Object,//字段附加属性 | ||
| rules : Array<Object | Function | String>//字段校验规则 | ||
| } | ||
| ``` | ||
|
|
||
| ## 依赖 | ||
|
|
||
| ```javascript | ||
| import { createAsyncFormActions } from '@uform/react' | ||
| ``` | ||
|
|
||
| ## 用例 | ||
|
|
||
| ```jsx | ||
| import React from 'react' | ||
| import ReactDOM from 'react-dom' | ||
| import SchemaForm, { | ||
| Field, | ||
| registerFormField, | ||
| connect, | ||
| createAsyncFormActions | ||
| } from '@uform/react' | ||
|
|
||
| registerFormField( | ||
| 'string', | ||
| connect()(props => <input {...props} value={props.value || ''} />) | ||
| ) | ||
|
|
||
| registerFormField('text', connect()(props => <div>{props.value || ''}</div>)) | ||
|
|
||
| const actions = createAsyncFormActions() | ||
|
|
||
| actions.setFieldState('bb', state => { | ||
| state.value = '123123' | ||
| }) | ||
|
|
||
| ReactDOM.render( | ||
| <div> | ||
| <SchemaForm | ||
| actions={actions} | ||
| effects={$ => { | ||
| $('onFieldChange', 'aa').subscribe(({ value }) => { | ||
| actions.setFieldState('bb', state => { | ||
| state.value = value | ||
| }) | ||
| }) | ||
| }} | ||
| onSubmit={() => alert('submited')} | ||
| > | ||
| <Field name="aa" type="string" /> | ||
| <Field name="bb" type="text" /> | ||
| </SchemaForm> | ||
| <button | ||
| onClick={() => { | ||
| actions.submit() | ||
| }} | ||
| > | ||
| 提交表单 | ||
| </button> | ||
| </div>, | ||
| document.getElementById('root') | ||
| ) | ||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,132 @@ | ||
| # 内外通讯联动 | ||
|
|
||
| > 是指 Form 外部想要与 Form 进行通讯的场景，比如调用 Form 的 submit 方法 | ||
| > /validate 方法，或者直接设置 Form 某个字段状态的场景 | ||
| ### 使用 createFormActions 做通讯 | ||
|
|
||
| > 使用 createFormActions 所创建出来的所有表单操作方法都是同步调用的方式，但是它 | ||
| > 是必须等待组件初始化完成之后才能调用，否则会报错不过通常我们调用它的方法都是在 | ||
| > 某个异步事件里调用，所以恰好错开了组件渲染过程的时机，在异步事件内调用就不会报 | ||
| > 错 | ||
| ```jsx | ||
| import React from 'react' | ||
| import ReactDOM from 'react-dom' | ||
| import { | ||
| SchemaForm, | ||
| Field, | ||
| FormButtonGroup, | ||
| Submit, | ||
| Reset, | ||
| FormItemGrid, | ||
| FormCard, | ||
| FormPath, | ||
| FormBlock, | ||
| FormLayout, | ||
| createFormActions | ||
| } from '@uform/antd' | ||
| import { filter, withLatestFrom, map, debounceTime } from 'rxjs/operators' | ||
| import { Button } from 'antd' | ||
| import Printer from '@uform/printer' | ||
| import 'antd/dist/antd.css' | ||
|
|
||
| const actions = createFormActions() | ||
|
|
||
| actions.setFieldState('aa', state => { //同步调用会出错 | ||
| state.value = '123' | ||
| }) | ||
| actions.submit() //同步调用会出错 | ||
|
|
||
| const App = () => ( | ||
| <Printer> | ||
| <SchemaForm | ||
| actions={actions} | ||
| labelCol={6} | ||
| wrapperCol={4} | ||
| onSubmit={v => alert(JSON.stringify(v))} | ||
| > | ||
| <Field name="aa" type="string" required title="AA" /> | ||
| <FormButtonGroup offset={6}> | ||
| <Button onClick={()=>{ | ||
| //异步调用没问题 | ||
| actions.setFieldState('aa', state => { | ||
| state.value = 'hello world' | ||
| }) | ||
| actions.submit() | ||
| }}>修改AA的值并提交表单</Button> | ||
| </FormButtonGroup> | ||
| </SchemaForm> | ||
| </Printer> | ||
| ) | ||
| console.log(React.unstable_ConcurrentMode) | ||
| ReactDOM.render( | ||
| <React.unstable_ConcurrentMode> | ||
| <App /> | ||
| </React.unstable_ConcurrentMode>, | ||
| document.getElementById('root') | ||
| ) | ||
| ``` | ||
|
|
||
| ### 使用 createAsyncFormActions 做通讯 | ||
|
|
||
| > 如果用户不想关心 actions 与组件初始化时机的问题，那么可以使用 | ||
| > createAsyncFormActions，每个被创建出来的方法都将返回一个 Promise 对象这样可以 | ||
| > 保证方法一定是会在组件初始化完成之后才会调用，也不会报错 | ||
| ```jsx | ||
| import React from 'react' | ||
| import ReactDOM from 'react-dom' | ||
| import { | ||
| SchemaForm, | ||
| Field, | ||
| FormButtonGroup, | ||
| Submit, | ||
| Reset, | ||
| FormItemGrid, | ||
| FormCard, | ||
| FormPath, | ||
| FormBlock, | ||
| FormLayout, | ||
| createFormActions | ||
| } from '@uform/antd' | ||
| import { filter, withLatestFrom, map, debounceTime } from 'rxjs/operators' | ||
| import { Button } from 'antd' | ||
| import Printer from '@uform/printer' | ||
| import 'antd/dist/antd.css' | ||
|
|
||
| const actions = createAsyncFormActions() | ||
|
|
||
| actions.setFieldState('aa', state => { | ||
| //同步调用没问题 | ||
| state.value = '123' | ||
| }) | ||
| actions.submit() //同步调用没问题 | ||
|
|
||
| const App = () => ( | ||
| <Printer> | ||
| <SchemaForm | ||
| actions={actions} | ||
| labelCol={6} | ||
| wrapperCol={4} | ||
| onSubmit={v => alert(JSON.stringify(v))} | ||
| > | ||
| <Field name="aa" type="string" required title="AA" /> | ||
| <FormButtonGroup offset={6}> | ||
| <Button | ||
| onClick={() => { | ||
| //异步调用没问题 | ||
| actions.setFieldState('aa', state => { | ||
| state.value = 'hello world' | ||
| }) | ||
| actions.submit() | ||
| }} | ||
| > | ||
| 修改AA的值并提交表单 | ||
| </Button> | ||
| </FormButtonGroup> | ||
| </SchemaForm> | ||
| </Printer> | ||
| ) | ||
| ReactDOM.render(<App />, document.getElementById('root')) | ||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.