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

trilever 发布于2019-08-23 14:28 / 1407人阅读

摘要：擅长网站建设微信公众号开发微信小程序开发小游戏制作企业微信制作建设，专注于前端框架服务端渲染技术交互设计图像绘制数据分析等研究。

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)

用于和表单进行双向绑定



    {getFieldDecorator("searchName")(
        
    )}

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建设

专线服务 idc机房托管 form表单校验 form表单插件 form表单判断 form表单提交

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/100656.html

JSON生成Form表单（三）

摘要：嵌套组件配置如果表单组件里还含有其他表单组件，这时直接通过组件配置去渲染无疑能节约不少的工作量。请输入方法传入组件配置的列表就能渲染出表单组件来，需要注意的是，子表单组件的一定是基于父表单组件的。表单的实例方法请看下节的生成表单四 container表单组件在实际的项目中，JSON表单提供的表单组件是远远不够的，而且提供表单组件是一件低效的事，目前Ant Design组件库提供的表单...

Half 2019-08-23 13:39 评论0 收藏0
JSON生成Form表单

摘要：是校验表单组件数据正确性的字段，其值为数组，里面的数组元素可以为。所以数组元素如果为的话，其内容就是的。到目前为止，表单适合大部分的表单应用场景。 JSON表单描述 JSON表单是一个基于React的抽象组件，它可以把JSON数据格式描述的表单转换成项目中的表单，它可以用简短的几行代码，快速的生成Form表单。JSON表单的优点是：可以快速构建出一个表单表单的数据、逻辑、视图分...

bingchen 2019-08-26 13:22 评论0 收藏0
react 前端项目技术选型、开发工具、周边生态

摘要：更多参考通过库掌握函数组件有些时候，我们想要动态的加载一些组件按需加载，比如在一个单页面应用中页面的组件页面的组件页面的组件只有真正要实例化当前页面的时候，才会去加载相应的组件。 react 前端项目技术选型、开发工具、周边生态声明：这不是一篇介绍 React 基础知识的文章，需要熟悉 React 相关知识主架构：react, react-router, redux, redux...

hersion 2019-08-30 15:54 评论0 收藏0
react 前端项目技术选型、开发工具、周边生态

摘要：更多参考通过库掌握函数组件有些时候，我们想要动态的加载一些组件按需加载，比如在一个单页面应用中页面的组件页面的组件页面的组件只有真正要实例化当前页面的时候，才会去加载相应的组件。 react 前端项目技术选型、开发工具、周边生态声明：这不是一篇介绍 React 基础知识的文章，需要熟悉 React 相关知识主架构：react, react-router, redux, redux...

kidsamong 2019-08-23 14:07 评论0 收藏0
react 前端项目技术选型、开发工具、周边生态

摘要：更多参考通过库掌握函数组件有些时候，我们想要动态的加载一些组件按需加载，比如在一个单页面应用中页面的组件页面的组件页面的组件只有真正要实例化当前页面的时候，才会去加载相应的组件。 react 前端项目技术选型、开发工具、周边生态声明：这不是一篇介绍 React 基础知识的文章，需要熟悉 React 相关知识主架构：react, react-router, redux, redux...

Hanks10100 2019-08-05 15:48 评论0 收藏0