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