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

最新推荐文章于 2025-06-30 09:07:41 发布
最新推荐文章于 2025-06-30 09:07:41 发布
阅读量1.2k 收藏 1
点赞数
CC 4.0 BY-SA版权
文章标签： Ant Design
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_43818482/article/details/85647923
本文介绍了如何使用Ant Design的Form组件实现查询表单，包括Form.create()高阶组件的使用、表单数据双向绑定、渲染查询条件及获取表单值的方法。还提供了相关源码解读和作者的前端开发经验。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

Ant Design of React @3.10.9

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

实现一个查询表单

查询表单

思路

  1. Create表单：@Form.create()
  2. 表单数据绑定 getFieldDecorator
  3. 渲染查询表单的查询条件 render <Form.Item>
  4. 获取查询条件的值 validateFields

代码

1. Create表单：@Form.create()

Form.create()

这是一个高阶函数，传入的是react组件，返回一个新的react组件，在函数内部会对传入组件进行改造，添加上一定的方法用于进行一些秘密操作 如果有对高阶组件有想要深入的请移步《深入理解 Rea

最低0.47元/天 解锁文章

200万优质内容无限畅学
Ant Design Form表单
quitv的博客
07-22 1253
内联登录栏，常用在顶部导航栏中。 import React from 'react'; import ReactDOM from 'react-dom'; import 'antd/dist/antd.css'; import './index.css'; import { Form, Icon, Input, Button } from 'antd'; function hasErrors(fieldsError) {//getFieldsError() return Object.keys(
【个人笔记】关于ant design的form表单
divergent_zlj博客
09-07 511
最近有一个项目正在迭代，这次迭代除了技术栈没换，其他都是新的，ui也换成了ant design，自从放弃了bootstarp之后转手使用过layui，elementui，iview到现在得antd，实际上iview跟antd得用法是比较相似得，但是由于公司得项目需求有大量的图表，当时转到antd是发现ant的生态比iview的好，有比较强大的可视化工具库，这吸引了我的眼球，例如g2的使用虽然看着比...
解决ant-design-mini在微信小程序中Modal组件动画失效问题
最新发布
gitblog_07492的博客
06-30 417
解决ant-design-mini在微信小程序中Modal组件动画失效问题 问题背景 ant-design-mini作为支付宝小程序生态中广受欢迎的UI组件库，其Modal组件在支付宝环境下能够正常展示打开和关闭时的过渡动画效果。然而，当开发者尝试在微信小程序环境中使用该组件时，发现Modal组件的动画效果失效，表现为直接弹出和消失，缺乏平滑的过渡体验。 技术分析 Modal组件的动画效果通常依赖...
Ant Design表单Form常用方法
WJLcomeon的博客
01-04 1272
1.通过 Form.useForm 对表单数据域进行交互。 const [form] = Form.useForm(); 2.validateFields 触发表单验证 const res = form.validateFields(); 3.setFieldsValue() 设置表单的值，更新对应的值. 设置表单的值（该值将直接传入 form store 中。如果你不希望传入对象被修改，请克隆后传入） form.setFieldsValue({ product: 'ban...
antd Design Form表单的简单理解
dashinihao的博客
03-02 1399
关于react+ant的运用配合的学习心得，还是新手各位大佬见谅 1 对于普通的开发需求来说（仅仅限于类组件） 引入Form 关于Form 有以下几种常用属性 <Form ></Form> (1) initialValues 这个属性是设置 Form.Item 的初始值，，当然还可以在Form.Item里设置每个表单项的初始值，但是官方推荐的还是在Form 里设置 用法来说 initialValues 是一个对象 比如你的表单项是这样的 <Form initialValue
Antd Form组件中 Form.create()的方法
2201_75981794的博客
07-27 1180
{required: true, message: '请输入用户名'},{whitespace: true, message: '不能为空格'}经 Form.create() 包装过的组件会自带 this.props.form 属性。
k-form-design:基于vue Ant-Design 的表单设计器，快速开发
05-10
设计器布局参考form-generator项目，基于vue和ant-design-vue实现的表单设计器，样式使用less作为开发语言，主要功能是能通过简单操作来生成配置表单，生成可保存的JSON数据，并能将JSON还原成表单，使表单开发更...
基于vue Ant-Design 的表单设计器.zip
12-26
这个工具结合了Vue.js的响应式特性和Ant Design的优美UI组件库，为开发人员提供了一种高效、灵活的表单设计解决方案。 Vue.js是一个轻量级的前端JavaScript框架，以其简洁的API和易于上手的特点深受开发者喜爱。它...
vue+ant-design+formBuiler表单构建器-技能提升-form design-亲测有效
05-08
vue+ant-design+formBuiler表单构建器——技能提升——form design——亲测有效 vue+ant-design+formBuiler表单构建器 form design 亲测有效 表单构建器 formBuilder插件的使用 vue:表单构建器 自定义拖拽表单 实现...
基于Vue Ant-Design的快速开发型k-form-design表单设计器源码
09-28
本项目正是基于这一需求，利用Vue.js框架与Ant-Design设计体系，成功开发出一款名为“k-form-design”的表单设计器。该设计器采用直观的拖放界面，旨在简化表单设计过程，使得开发者能够迅速地构建出既美观又功能...
ant-design-vue3.x的form表单爬坑.pdf
12-16
在Ant Design Vue 3.x版本中，表单的使用与之前版本有了一些显著的变化，特别是对于嵌套表单的处理和验证方式。本文将详细解析这些变化，帮助开发者避免在升级过程中遇到的“坑”。 首先，让我们关注的是嵌套表单...
使用antd.form.create
weixin_44234336的博客
07-29 921
import { FormComponentProps } from "antd/lib/form"; //2.定义props和state的类型 interface Props extends FormComponentProps { visible: boolean; onOk?: (data:GeneratePaymentFormDTO ) => void; type:number; generateMode:number; idList: string[] | number
React利用Antd的Form组件实现表单功能
GuanJdoJ的博客
10-23 2万+
========2023.2.17更新======== 现在ant.design已进入V5版本，表单基础用法和V4基本一致，代码示例如下：
antd中Form组件表单校验使用的Form.create()
蓝枫秋千的踩坑记录
02-13 6032
两种用法 注意: 这两种方式都要return一个jsx,要不然会报错 类组件 class CustomizedForm extends React.Component { ...代码 } CustomizedForm = Form.create({})(CustomizedForm); export default CustomizedForm 函数组件 const aaa =(form...
Ant Design中的Form组件
weixin_34082789的博客
11-23 279
1. 使用Form.create()包裹过的组件可以获取到this.props.form属性 Form.create()(Comp) 2. getFieldDecorator() 1 // 在表单中的使用 2 <FormItem> 3 { 4 getFieldDecorator('field', { 5 rules...
vue 快速生成组件的指令_ant-design-vue表单生成组件form-create快速上手
weixin_39840729的博客
12-20 1158
介绍form-create 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的表单生成器。并且支持生成任何 Vue 组件。结合内置17种常用表单组件和自定义组件，再复杂的表单都可以轻松搞定。安装CDN 引入NPM安装推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。npm i @form-create/ant-design-vue引入import f...
箭头函数与class函数使用Antd Form组件中 Form.create()的方法
热门推荐
weixin_41544124的博客
02-12 3万+
经 Form.create() 包装过的组件会自带 this.props.form 属性 一、class函数使用Form.create(): class CustomizedForm extends React.Component { ...代码 } CustomizedForm = Form.create({})(CustomizedForm); 官网有详细介绍 比较完整的代码段 cons...
使用antd的Form.create包装组件，用到getFieldDecorator方法来收集表单数据时出现的页面更新问题
WDboke的博客
10-14 771
一，需求 说明：添加多个司机信息并带有删除功能，整体看下来是没什么难度的，定义一个数组用来存司机信息，然后用map循环遍历一下构建出基本的结构，添加用push方法，删除用splice的索引删除方法，但问题就出在每次进行删除操作时，不管点击第几行数据的删除按钮，都删除最后一行数据！！就离谱~ 因为之前有做过类似的功能，就还是按照之前的思路写的，前几次的功能是没有问题的，只有这次遇到了这种情况，反复思考到底是哪一步出了问题……，之后想到以前实现这个功能时都是用的原生输入框，单独收集数据，这次用的是组件自
createform用法_ant-design-vue表单生成组件form-create快速上手
weixin_35728216的博客
02-15 2604
介绍form-create 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的表单生成器。并且支持生成任何 Vue 组件。结合内置17种常用表单组件和自定义组件，再复杂的表单都可以轻松搞定。安装CDN 引入NPM安装推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。npm i @form-create/ant-design-vue引入import f...
快速开发Vue表单设计器，采用Ant-Design组件库
在本资源中，重点在于如何使用Vue.js的组件系统和Ant-Design的UI组件快速搭建一个功能完备的表单设计器。 快速开发表单的流程可能包括以下几个步骤： 1. 设计模式：为表单元素设计可复用的组件，比如输入框、选择...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值