共计 1323 个字符，预计需要花费 4 分钟才能阅读完成。
Ant Design of React @3.10.9
拉取项目 luwei.web.study-ant-design-pro, 切换至 query 分支，可看到 Form 表单实现效果
实现一个查询表单
思路
Create 表单：@Form.create()
表单数据绑定 getFieldDecorator
渲染查询表单的查询条件 render <Form.Item>
获取查询条件的值 validateFields
代码
1. Create 表单：@Form.create()
Form.create()
这是一个高阶函数，传入的是 react 组件，返回一个新的 react 组件，在函数内部会对传入组件进行改造，添加上一定的方法用于进行一些秘密操作 如果有对高阶组件有想要深入的请移步《深入理解 React 高阶组件》，我们这里不做过多的深究。
经 Form.create() 包装过的组件会自带 this.props.form 属性
// 使用方式如下：
class CustomizedForm extends React.Component {}
CustomizedForm = Form.create({})(CustomizedForm);
代码中结合 @ 的修饰器，用 @Form.create() 进行创建。
2. 表单数据绑定 getFieldDecorator
getFieldDecorator(id, options)
用于和表单进行双向绑定
<!– 表单数据绑定 –>
<Form.Item {…formItemLayout} label={‘ 名称 ’}>
{getFieldDecorator(‘searchName’)(
<Input placeholder={‘ 请输入名称 ’} />
)}
</Form.Item>
3. 渲染查询表单的查询条件 render <Form.Item>
在定义表单字段的时候，渲染到页面中，与步骤 2 代码一致
更多 FormItem 属性请参考 Ant Design – Form – Form.Item
4. 获取查询条件的值 validateFields
form.validateFields / validateFieldsAndScroll
校验并获取一组输入域的值与 Error，若 fieldNames 参数为空，则校验全部组件
const {form} = this.props;
// 获取并检查表单数据
form.validateFields((err, fieldsValue) => {
if (err) return;
const {searchName = ”} = fieldsValue;
});
深入了解
Ant Design Form 表单
rc-form
antd 源码解读（9）- Form
作者简介：李尧晖，芦苇科技 web 前端开发工程师，代表作品：飞花亭小程序、续航基因、YY 表情红包、YY 叠方块直播竞赛小游戏。擅长网站建设、微信公众号开发、微信小程序开发、小游戏制作、企业微信制作、H5 建设，专注于前端框架、服务端渲染、SEO 技术、交互设计、图像绘制、数据分析等研究。
欢迎和我们一起并肩作战：web@talkmoney.cn 访问 www.talkmoney.cn 了解更多
提供深圳微信公众号制作，高质量的钉钉外包，广东企业微信建设，东莞微信小程序制作，专业的小游戏开发，广州 H5 建设
