Ant Design of React @3.10.9
拉取项目 luwei.web.study-ant-design-pro, 切换至query
分支,可看到 Form 表单实现效果
实现一个查询表单
![ff2e93e7d6793b2f199d6e55018fdf40.png](https://i-blog.csdnimg.cn/blog_migrate/b8db60cb2d87cafadc9acf8f808cac50.png)
思路
- 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;
// 获取并检查表单数据
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建设