getFieldDecorator

1、定义getFieldDecorator
const { getFieldDecorator, getFieldsError, getFieldError, isFieldTouched } = this.props.form;

2、Cannot read property ‘getFieldDecorator’ of undefined错误,搜索之后发现是没有调用Form.create()的原因。
在 在class最后面添加 className=Form.create({})(className);

3、antd的Form中弃用了getFieldProps,改为了getFieldDecorator。
经过 getFieldDecorator 包装的控件,表单控件会自动添加 value(或 valuePropName 指定的其他属性) onChange(或 trigger 指定的其他属性),数据同步将被 Form 接管,这会导致以下结果:

不需要也不应该用 onChange 来做同步,但还是可以继续监听 onChange 等事件。
你不能用控件的 value defaultValue 等属性来设置表单域的值,默认值可以用 getFieldDecorator 里的 initialValue。你不能用控件的 value defaultValue 等属性来设置表单域的值,默认值可以用 getFieldDecorator 里的 initialValue.
你不应该用 setState,可以使用 this.props.form.setFieldsValue 来动态改变表单值。你不应该用 setState,可以使用 this.props.form.setFieldsValue 来动态改变表单值。

getFieldDecorator(id, options) 参数
id是必填参数,表示输入控件唯一标志 string

参数 说明 类型 默认值
id 必填,输入控件唯一标志 string
options 选填,表以对象字面量的形式表示相应的选项
对于options ,有以下属性:

属性 说明 类型 默认值
getValueFromEvent 指定如何从事件中获取值,可以把 onChange 的参数(如 event)转化为控件的值 function(…args)
initialValue 子节点的初始值,类型、可选值均由子节点决定(注意:由于内部校验时使用 === 判断是否变化,建议使用变量缓存所需设置的值而非直接使用字面量))
normalize 转换默认的 value 给控件 function(value, prevValue, allValues): any
rules 校验规则,见下方表格 object[]
trigger 收集子节点的值的时机 string ‘onChange’
validateFirst 当某一规则校验不通过时,是否停止剩下的规则的校验 boolean
validateTrigger 校验子节点值的时机 string string[]
valuePropName 子节点的值的属性,如 Switch 的是 ‘checked’ string ‘value’
上文说的校验规则:

参数 说明 类型 默认值
enum 枚举类型 string -
len 字段长度 number -
max 最大长度 number -
message 校验文案 string ReactNode
min 最小长度 number -
pattern 正则表达式校验 RegExp -
required 是否必选 boolean false
transform 校验前转换字段值 function(value) => transformedValue:any -
type 内建校验类型,可选项 string ‘string’
validator 自定义校验(注意,callback 必须被调用) function(rule, value, callback) -
whitespace 必选时,空格是否会被视为错误 boolean false

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值