antd的Form中弃用了getFieldProps,改为了getFieldDecorator,现在记录一下相关的用法。
getFieldDecorator用于数据的交互反馈
之前对于getFieldProps,首先定义是const {getFieldProps} = this.props.form;
现在对于getFieldDecorator,没有变化const {getFieldDecorator} = this.props.form;
对于表单元素FormItem中的调用变化较大:
之前:
<FormItem label="密码">
<Input type="password" placeholder="请输入您的密码" {...getFieldProps('r_password')}/>
</FormItem>
现在:
<FormItem label="确认密码">
{getFieldDecorator('r_confirmPassword')(<Input type="password" placeholder="请再次输入您的密码" />)}
</FormItem>
this.props.form.getFieldDecorator(id, options)
经过 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 |
样例分析
{getFieldDecorator('upload', {
valuePropName: 'fileList',
getValueFromEvent: this.normFile,
})(
<Upload name="logo" action="/upload.do" listType="picture">
<Button><Icon type="upload" /> Click to upload</Button>
</Upload>
)}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 'upload’表示该控件的标志,自己定义就成。
- valuePropName:表示子节点的属性。说白了就是
<input type="file">
元素都有一个files属性(property),用来存储用户所选择的文件,fileList就表示可以通过这个对象访问到用户所选择的文件。 - getValueFromEvent:表示通过this.normFile来获取这个事件的值
{getFieldDecorator('select-multiple', {
rules: [
{ required: true,
message: 'Please select your favourite colors!',
type: 'array'
},
],
})(
<Select mode="multiple" placeholder="Please select favourite colors">
<Option value="red">Red</Option>
<Option value="green">Green</Option>
<Option value="blue">Blue</Option>
</Select>
)}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- "select-multiple"表示该控件的标志
- "rules"校验规则。此处的校验规则有required、message和type
- required:表示是否必选,用在此处表示下面的表单是否必填。
- message:表示校验文案 ,即当不满足时会弹出的提示文字。用在此处表示当不满足required的要求时,即此处表单没有填的时候,会弹出提示文字:Please select your favourite colors!
- type:内建校验类型。此处是array,表示应当是一个数组类型
getFieldDecorator(id, options) 之后是什么
可以看到getFieldDecorator(id, options) 之后还有一个(),此处()里面的内容表示要应用getFieldDecorator的元素。
之前的getFieldProps是如下写法:
<FormItem label="密码">
<Input type="password" placeholder="请输入您的密码" {...getFieldProps('r_password')}/>
</FormItem>
- 1
- 2
- 3
即将其作为<Input>
的一个属性。
而现在的getFieldDecorator可以说是作为了一个函数使用:
<FormItem label="确认密码">
{getFieldDecorator('r_confirmPassword')(<Input type="password" placeholder="请再次输入您的密码" />)}
</FormItem>
- 1
- 2
- 3
后面的(<Input type="password" placeholder="请再次输入您的密码" />)
就表示要将getFieldDecorator应用的元素位置。
antd的Form中弃用了getFieldProps,改为了getFieldDecorator,现在记录一下相关的用法。
getFieldDecorator用于数据的交互反馈
之前对于getFieldProps,首先定义是const {getFieldProps} = this.props.form;
现在对于getFieldDecorator,没有变化const {getFieldDecorator} = this.props.form;
对于表单元素FormItem中的调用变化较大:
之前:
<FormItem label="密码">
<Input type="password" placeholder="请输入您的密码" {...getFieldProps('r_password')}/>
</FormItem>
现在:
<FormItem label="确认密码">
{getFieldDecorator('r_confirmPassword')(<Input type="password" placeholder="请再次输入您的密码" />)}
</FormItem>
this.props.form.getFieldDecorator(id, options)
经过 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