React学习之antd中getFieldDecorator的使用

本文是antd的3.x版本，4.x摒弃了getFieldDecorator。
我开发中遇到的的antd组件库问题总结。

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 接管，这会导致以下结果：

1. 你不再需要也不应该用 onChange 来做同步，但还是可以继续监听 onChange 等事件。
2. 你不能用控件的 value defaultValue 等属性来设置表单域的值，默认值可以用 getFieldDecorator 里的 initialValue。你不能用控件的 value defaultValue 等属性来设置表单域的值，默认值可以用 getFieldDecorator 里的 initialValue.
3. 你不应该用 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