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

╰+攻爆jí腚メ 2023-05-28 05:17 5阅读 0赞

### 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的值。