atnd 3.x版本中，如何为表单设置、绑定默认值

在react的组件化开发思维，确实做到很绑，独创的JSX语言为一切组件皆函数提供强有力的支撑。但是，对于需要双向数据绑定场景来说，真的是噩耗。尤其是在做表单的数据绑定。

下面介绍一下，在react+antd如何实现表单字段的数据初始值设置，数据绑定等骚操作。

`getFieldDecorator` 及`Form.create`

要实现数据绑定，及初始化，getFieldDecorator及Form.create方法很重要。

getFieldDecorator是用来装饰form中的各种输入控件的,如：input select…，装饰啥呢，为毛要去装饰这些，搞得怪怪的，想干嘛直接对input进行设置或操作不行吗？真的不行（至少不够优雅，因为你会陷入无穷无尽的事件绑定的定义及状态修改的陷阱）

Form.create 则是用来包裹成一个form的，这TMD又不是人话，好端端的，去包裹一个<form>干嘛？其实，简单点来说，就是可以用Form.create来创建一个完全自定义的<form>，一般的HTML(react下的jsx)代码被Form.create包裹了一些，那么，这个组件就具有form的一些特性了。
但是，我们貌似对自定义<form> 没兴趣啊？为毛用它呢？这是因为，用它包裹了组件后，组件就弄直接继承一些很有用的属性，这些属性是可以直接操作使用 getFieldDecorator 装饰过的各种输入控件的。

1）如何使用getFieldDecorator
getFieldDecorator 可以理解为，一个用在form表单中为input进行数据绑定的工具或方法，antd貌似把它叫做装饰器。怎么使用呢，看下面：

class MyComp extends Componet{
	render(){
	const id = 'userName'
	const options = {
		initialValue: 'xiao.ming'
	}
	const { getFieldDecorator } = this.props.form
	return (
	<Form>
		{getFieldDecorator(id, options)(<Input />)}
		<Button htmlType="submit">提交</Button>
	</Form>
	}
}

1）如何使用Form.create呢？
很简单，直接在组件最后导出时，用Form.create执行以下就好了

export default Form.create({name: 'my-form'})(MyComp)

经过form.create后，可以从组件props中获取form。

经过 getFieldDecorator 包装的控件，表单控件会自动添加 value（或 valuePropName 指定的其他属性） onChange（或 trigger 指定的其他属性），数据同步将被 Form 接管，这会导致以下结果：

1、’你不再需要也不应该用 onChange 来做同步，但还是可以继续监听 onChange 等事件。

2、你不能用控件的 value defaultValue 等属性来设置表单域的值，默认值可以用 getFieldDecorator 里的 initialValue。

3、你不应该用 setState，可以使用 this.props.form.setFieldsValue 来动态改变表单值。

注意：
1、getFieldDecorator 不能用于装饰纯函数组件。
2、如果使用的是 react@<15.3.0，则 getFieldDecorator 调用不能位于纯函数组件中:

经过 getFieldDecorator 包装的控件，表单控件会自动添加 value（或 valuePropName 指定的其他属性） onChange（或 trigger 指定的其他属性），数据同步将被 Form 接管。

上面这段话，也就是说，自定义的控件经过getFieldDecorator包装后，会有onChange属性，这样自定义控件传值是，用onChange传入，就会改变value的值，在表单提交的时候，就可以获取value的值。

丰色木夕

发布了132 篇原创文章 · 获赞 7 · 访问量 2万+

私信关注