- Form.create创建了实例、注册、收集、校验
- 创建实例 this.props.form,并不是创建组件;实例提供一系列的方法,如注册、收集、校验
- initialValue 默认值
- getFieldDecorator 注册字段
- 需要该实例进行收集校验的组件,必须要通过getFieldDecorator进行注册
- 一旦经过getFieldDecorator的修饰,那么该组件的值将完全由 form实例管理
- 一旦被 getFieldDecorator注册过的组件触发onChange事件,便会触发这个父组件的的更新(forceUpdate),从而促使被注册组件的render
- 组件不能在通过 value赋值,组件的状态将全部由 getFieldDecorator托管
- 组件用 initialValue俩设置初始的默认值
- Form.create后的表单就像一个独立的黑盒,不管里面的数据如何变化,都不会影响到外部,也就是父级数据的变化
- Form.create 创建了一个 form context,提供一个 getFieldDecorator 方法用于注册字段
2. getFieldDecorator调用后,包裹的组件会被自动注入 value 和 onChange 属性进行双向绑定
a. value 和 onChange 不用写了
b. 从而简化用户的输入,类似于 vue的 v-model
c. 经过 getFieldDecorator 注册过的字段在 Form 中是一个唯一的字段
ⅰ. 如果注册了一个 user 字段,然后又注册一个 user.name 字段,field就会报错,原因:
ⅱ. 3.xForm内部,Field 是单独存储并与整体 store 进行关联
ⅲ. 当你改变了一个 Field 且正好它又是另一个嵌套的 Field 中的一部分,那么这两个注册的 Field 就会产生冲突
ⅳ. 嵌套结构的动态表单:只需要注册子字段例如: arr[0].phone,
ⅴ. 注册 arr会报错,数据结构发生错误变化,设置值也要对 arr[0].phone设置值
ⅵ. [{phone: ‘’, email: ‘’, user:’’}, {phone: ‘’, email: ‘’, user: ‘’}]
3. 通过 form.getFieldValue 来进行一些渲染的控制
a. 比如说字段 A 为某些值的时候,显示额外的字段 B,反之显示字段 C
b. 为了达到效果,Field 每次变更的时候都需要重新渲染整个组件
c. 会导致巨型表单出现明显的性能问题,因为又全都渲染了一遍
4. 3.x form表单中,initalValue只能显示第一次传进来的值,之后的值都无法显示;setState也无法改变
a. 3.x 通过 onChange 事件收集值,而 onBlur 作为校验的时机;这两个时机返回的参数可能不同
b. 4.xtrigger和 validateTrigger 变得各司其职,一个只用于收集值,而另一个只用于触发校验
5. Form.create 包裹的组件在一个字段更新后,会重新渲染整个组件
6. 在拥有大量表单的页面,就会出现性能问题,因为一个字段改变会导致表单的全部重新渲染,即便其他表单没有改变
7. 4.x Form.Item 上设置 name 属性,解决全部渲染问题
8. 直接包一层就可以退化成 v3.x 的全部渲染方式
9. Form.Item 添加 dependencies,校验关联字段:例如:注册用户的“密码”与“确认密码”
a. 当该字段依赖的字段更新时,它也会触发一遍自己的规则校验
10. 4.x shouldUpdate 接收一个对比函数,同 shouldComponentUpdate 一样可以控制更新条件
11. 海量表单用 formily 表单性能优化,更好一些,简单场景用 antd Form
12. 表单验证通过后才会触发 onSubmit
a. onFinish 和 onFinishFailed 属性。你可以单独处理这两个事件
b. 原生的 input 组件输入文字并不会触发 change 事件
c. React代理了 change 事件并将其进行了扩展
d. 在受控状态下,如果不能在正确的时机触发 change ,那么受控的 value 就会导致输入不正确的问题
ⅰ. async-validator 库对输入数据进行异步校验
13. Safari浏览器中:当用户通过输入法输入完一段中文的时候,input 的值会先从拼音字母变成空字符 ‘’ 然后再变成输入的中文;其他浏览器没有这个问题,直接从英文变为中文
a. Safari导致如果一个 Field 设置了 required 的时候,空字符串使得校验发现不满足规则,从而渲染错误提示
b. 通过 ompositionEvent 来监听输入状态,在 IME 结束后才触发校验,行不通,解决:
c. 在短时间内如果状态切换是:正确 => 错误 => 正确 ,将其合成为:正确