Ant Design Form

Antd 表单的核心无非是以下两点

表单创建（Form.create）在this.props写入form属性
表单与组件的双向绑定（this.props.form.getFieldDecorator）
表单的取值（this.props.form.validateFields / this.props.form.validateFieldsAndScroll）

表单创建

Form.create这是一个高阶函数，传入的是react组件，返回一个新的react组件，在函数内部会对传入组件进行改造，添加上一定的方法用于进行一些秘密操作，这里不多做解释，有兴趣的同学可以上官网查看。

class CustomizedForm extends React.Component { ... }

// use wrappedComponentRef
const EnhancedForm =  Form.create()(CustomizedForm);

或者

1 2	@Form.create() class CustomizedForm extends React.Component { ... }

表单与组件的双向绑定

他的目的是将表单的组件的值与表单绑定。最后表单可以直接取到某某组件的值。

<!-- 表单数据绑定 -->
<Form.Item {...formItemLayout} label={'名称'}>
	{getFieldDecorator('searchName')(
		<Input placeholder={'请输入名称'} />
	)}
</Form.Item>

这个是一个非常简单的绑定，组件input的值都会由’searchName’这个属性收纳。
可以直接取值，当然也可以加入自己的校验规则，等等。这里不多做解释，这些都是附加的进阶功能，这里不多做描述。

我是飞机票（表单进阶），点我！

表单的取值

this.props.form.validateFields((err, values) => {
      if (!err) { // 这里也可以不要，是用于校验的。
        console.log('Received values of form: ', values);
      }
    });

这是一个非常简单的取值，当然可以定制的取值，或者定制的校验，比如，在获取验证码的时候，不需要校验密码是否输入或者符合你的规则，就可以只校验手机号，等等。这里不多做解释，这些都是附加的进阶功能，这里不多做描述。

我是飞机票（表单进阶），点我！

基本上你掌握了这些就可以较为灵活的使用Ant Design Form了。