antd3.x中的form

最近在维护公司的中台erp系统，项目中js库用的是react，ui库用的是antd。平时还是喜欢自己写css，刚开始还是有点不太习惯直接上ui库做项目，觉得用antd还是挺恶心的，主要是form。在熟悉了以后发现这个库真棒。

react缺少类似vue的v-model这样的双向绑定机制, 所以在做表单的时候需要手动监听keyup,input,blur这一类的事件，会显得稍微麻烦一些。而antd中的form则出了一个类似v-model的类似方法。它不仅仅提供了双向绑定功能，而且它还具有校验，取值，赋值，重置，数据搜集，提交功能。antd官网

双向绑定：getFieldDecorator

用法：该方法用在表单的子域里面，通过this.props.form.getFieldDecorator(id, options)进行使用，其中id为输入控件的唯一标志，而options为一些基本的数据规则配置等等，详情查看

常见用法

 <Form.Item label="Note">
   {getFieldDecorator('username', {
       rules: [{ required: true, message: 'Please input your note!' }],
   })(<Input />)}
</Form.Item>

虽然有双向绑定，但是在某些时候，也会用到设置值与获取值的方法，则会使用到setFieldsValue,getFieldsValue，getFieldValue。注意:要使用这些api，一定要把对应的 field 用 getFieldDecorator 进行注册。

设置值：setFieldsValue

通过setFieldsValue对其他控件进行赋值。

常见用法

this.props.form.setFieldsValue({
      username: 'kyle',
});

取值: getFieldsValue，getFieldValue

通过getFieldsValue对一组数据进行取值，getFieldValue对单个数据进行取值。

用法

获取全部数据

this.props.getFieldsValue()

获取filed为username的数据

this.props.getFieldValue('username')

校验：validateFields

校验方法会校验在双向绑定getFieldDecorator中定义必填项required为true的所有字段

form.validateFields((err,value) => {
        if(!err){
            return;  // 这里是通过校验的执行,未通过的则会在对应表单进行提示
        }
    }
)

重置表单：resetFields

this.props.form.resetFields()

提交数据

这个类似于，通过使用form的onSubmit事件,在提交的button上进行

用法如下

<Form labelCol={{ span: 5 }} wrapperCol={{ span: 12 }} onSubmit={this.handleSubmit}>
    <Form.Item wrapperCol={{ span: 12, offset: 5 }}>
          <Button type="primary" htmlType="submit"> //这里定义htmlType类似于原生js定义button的type
            Submit
          </Button>
    </Form.Item>
</Form>