You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
...
getFieldProps(name,usersFieldOption={}){if(!name){thrownewError('Must call `getFieldProps` with valid name string!');}deletethis.clearedFieldMetaCache[name];constfieldOption={
name,trigger: DEFAULT_TRIGGER,valuePropName: 'value',validate: [],
...usersFieldOption,// 用户输入,如rules,initialValue};const{
rules,
trigger,
validateTrigger =trigger,
validate,}=fieldOption;constfieldMeta=this.fieldsStore.getFieldMeta(name);if('initialValue'infieldOption){fieldMeta.initialValue=fieldOption.initialValue;}constinputProps={
...this.fieldsStore.getFieldValuePropValue(fieldOption),// 获取输入组件的value,如果没有,返回initialValueref: this.getCacheBind(name,`${name}__ref`,this.saveRef),};if(fieldNameProp){// 及valueinputProps[fieldNameProp]=name;}constvalidateRules=normalizeValidateRules(validate,rules,validateTrigger);// 校验规则标准化constvalidateTriggers=getValidateTriggers(validateRules);validateTriggers.forEach((action)=>{if(inputProps[action])return;inputProps[action]=this.getCacheBind(name,action,this.onCollectValidate);// 如果设置了输入校验rules,绑定onChange事件`this.onCollectValidate`});// make sure that the value will be collectif(trigger&&validateTriggers.indexOf(trigger)===-1){inputProps[trigger]=this.getCacheBind(name,trigger,this.onCollect);// 如果没有绑定rules校验,绑定默认的onChange事件}constmeta={
...fieldMeta,
...fieldOption,validate: validateRules,};this.fieldsStore.setFieldMeta(name,meta);// 保存field到store中if(fieldMetaProp){inputProps[fieldMetaProp]=meta;}if(fieldDataProp){inputProps[fieldDataProp]=this.fieldsStore.getField(name);}returninputProps;},
...
引言
看过antd源码的都知道,antd其实是在一组react-componment组件的基础上进行了一层ui封装,本文主要解读antd组件Form的基础组件react-componment/form,另外会略过
development
模式下的warning代码。Form.create
解读源码首先要从自己最常用的或者感兴趣的入手,首先form组件最主要的还是在
Form.create({options})
这个装饰器入手。找到项目下的文件createForm.js
,这个文件还是主要主要对createBaseForm.js
文件进行了一层封装,提供了一些默认配置参数,下看查看createBaseForm.js
里的createBaseForm方法,改方法主要是一个装饰器作用,包装一个高阶React组件,在props里注入一个值为formPropName(默认为form)
变量,所有功能在这个变量里完成,主要内容如下在装饰器初始化的时候,Form初始化了一个只属于该组件实例的store,用来存放当前Form组件的一些输入的数据,主要代码如下:
getFieldDecorator
柯里化函数,通过id与参数声明的输入,返回一个函数以输入组件为入参的函数,通过该函数声明的输入组件与表单Form双向数据绑定。
getFieldProps
查看函数
getFieldProps
,主要用来初始化输入组件的props,将特定的函数缓存在内部,如onChange事件,另外初次保存field到store中getCacheBind
getCacheBind
方法,缓存函数,使用bind方法绑定上下文并缓存部分参数,返回一个新的函数,用做onChange及数据校验。onCollectCommon
在
getFieldProps
方法中看到利用getCacheBind
方法当无rules的时候绑定了一个onCollect
方法,onCollect方法主要调用onCollectCommon
方法,并将得到的结果保存到store。onCollectValidate
在有输入rules的时候
getCacheBind
方法绑定onCollectValidate
作为onChange事件,该方法做了除了调用了onCollectCommon事件以外,还调用了校验方法validateFieldsInternal
。validateFieldsInternal
该方法主要是从store中获取rules校验规则并标准化后,使用
async-validator
模块进行校验,并把结果保存到store中,本文不做讲解。setFields
该方法主要是设置store中的field,因为store的数据是不可观测的数据,不会引起页面的重渲染,该方法也负责调用
forceUpdate()
强制更新页面。最后
主要方法大概就上面这些,其中流程差不多在每次setFields之前,会在store中存一个field的变化字段
fieldMeta
,在最后强制更新页面的时候,将该变量取出来做处理后覆盖到field,所有数据保存在field中,并提供了一些hock方法如setFieldsValue
、validateFields
等方法设置和获取store中的field字段和值。The text was updated successfully, but these errors were encountered: