Ant-Design-组件-——-Form表单（一）

广州芦苇科技web前端

Ant Design of React @3.10.9
拉取项目 luwei.web.study-ant-design-pro , 切换至 query 分支，可看到 Form 表单实现效果

实现一个查询表单

思路

Create表单： @Form.create()
表单数据绑定 getFieldDecorator
渲染查询表单的查询条件 render
获取查询条件的值 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 `

在定义表单字段的时候，渲染到页面中，与步骤2代码一致

更多FormItem属性请参考 Ant Design - Form - Form.Item

4. 获取查询条件的值 `validateFields`

form.validateFields / validateFieldsAndScroll

校验并获取一组输入域的值与 Error，若 fieldNames 参数为空，则校验全部组件

const { form } = this.props;