Ant设计有条件地需要Form.Item

Ant Design是一套基于React的UI组件库，Form.Item是Ant Design中的一个组件，用于在表单中对表单项进行布局和样式控制。

Form.Item的主要作用是包裹表单项，通过设置属性来控制表单项的布局和样式。它可以接收一个或多个表单控件作为子元素，并提供了一些属性来配置表单项的布局和样式，例如label、labelCol、wrapperCol、colon等。

Form.Item的分类：

基本表单项：包括Input、Select、Checkbox、Radio等常用的表单控件。
复合表单项：包括DatePicker、TimePicker、Upload等需要更复杂交互的表单控件。
自定义表单项：可以通过自定义组件来实现特定的表单项需求。

Form.Item的优势：

简洁易用：Ant Design提供了丰富的表单控件和布局样式，可以快速构建美观且易于使用的表单。
响应式布局：通过设置labelCol和wrapperCol属性，可以实现灵活的响应式布局，适应不同屏幕尺寸。
表单校验：Form.Item提供了表单校验的功能，可以方便地对表单项进行验证，并给出相应的提示信息。

Form.Item的应用场景：

后台管理系统：在后台管理系统中，经常需要使用表单来收集用户输入的数据，Form.Item可以帮助我们快速构建各种表单项，提高开发效率。
注册和登录页面：在注册和登录页面中，通常需要使用表单来收集用户的账号和密码等信息，Form.Item可以帮助我们实现表单项的布局和样式控制。
数据编辑页面：在数据编辑页面中，经常需要使用表单来展示和编辑数据，Form.Item可以帮助我们实现表单项的布局和样式控制，并提供表单校验功能。

推荐的腾讯云相关产品和产品介绍链接地址：

腾讯云云服务器（CVM）：提供可扩展的云服务器实例，满足不同规模和需求的应用场景。产品介绍链接
腾讯云对象存储（COS）：提供安全可靠的云端存储服务，适用于图片、音视频、文档等各种类型的文件存储和管理。产品介绍链接
腾讯云人工智能（AI）：提供丰富的人工智能服务，包括图像识别、语音识别、自然语言处理等，帮助开发者快速构建智能化应用。产品介绍链接

相关·内容

详细剖析｜袋鼠云数栈前端框架Antd 3.x 升级 4.x 的踩坑之路

袋鼠云数栈从 2016 年发布第⼀个版本开始，就始终坚持着以技术为核⼼、安全为底线、提效为⽬标、中台为战略的思想，坚定不移地⾛国产化信创路线，不断推进产品功能迭代、技术创新、服务细化和性能升级。...在数栈过去的产品迭代中受限于当前组件的版本，积累了很多待解决的问题，随着新的功能需求不断增加，很多原先的组件以及交互设计需要进行优化。...2 月，伴随着数栈 UI5.0 的焕新升级，数栈前端团队一起将组件框架 antd 从 v3.x 升级到了 v4.x，更新组件的 UI，提升产品的交互体验，使数栈产品能够更加灵活地适应未来产品功能迭代的需求... )} 在使用 shouldUpdate 的时候，需要在第一个 Form.Item 上加上 noStyle，否则就会出现下面这种留白占位的情况...● 类名更改 .ant-table-content 更改为 .ant-table-container .ant-form-explain 更改为 .ant-form-item-explain ● dataIndex

4.1K3 0

Ant Design for React的DatePicker日期组件设置默认显示中文的方法

蚂蚁金服的前端UI框架Ant Design 有专门针对 React 设计的 Ant Design for React 。... locale={zhCN} />; // 设置为中文注意：DatePicker、MonthPicker、RangePicker、WeekPicker 部分 locale 是从 value 中读取，需要先正确设置...// 默认语言为 en-US，如果你需要设置其他语言，推荐在入口文件全局设置 locale import moment from 'moment'; import 'moment/locale/zh-cn...return ( ); 其实也不一定需要包裹整个应用，只在在有组件的部分进行包裹也可以..., Col, Checkbox, Button, AutoComplete, LocaleProvider, DatePicker, ConfigProvider } from 'antd'; // Ant

13.9K1 0

react+koa2+mongodb实现留言功能（可体验）

前端实现使用技术 react ant design typescript 在上面的截图中，很明显，就是一个表单的设计，外加一个列表的展示。...表单的设计使用了ant design框架自带的form组件： <Form {...layout} form={form} name="basic" onFinish={onFinish}...onFinishFailed={onFinishFailed} > <Form.Item label="主题" name="subject" rules={[...> 这里限制了输入的主题名称的长度为6-30；内容是30-300字符针对留言的展示，这里使用的是ant design自带的List和Comment组件： <List loading... ) : null} } /> )} /> 当然，如果是多级地树结构嵌套

1.1K1 0

简洁设计-毛玻璃效果登陆页面

我们先看看实现的效果：设计的初衷： 1. 简洁清爽 2. 重点突出整个页面使用了一个渐变的背景色(这里直接使用了图片)，重要的内容居中显示，条款等内容右下角小字展示；整个站点以拂晓蓝色调为主。...整个项目因为使用的是react ant design这种成熟的框架，所以几乎不需要自己额外写很多的样式。具体的框架结构不在本文涉及。...index'; import { Form, Input, Button, Card, notification } from 'antd'; import { FrownOutlined } from '@ant-design...}]} > <Form.Item...}]} > <Form.Item {

1.2K2 0

Ant Design 4.0 正式版来了！

v4 文档地址：https://ant.design[2] 需要注意的是，v3 版本于 2019 年 12 月合入 3.x-stable 分支并进入维护状态。...设计规范升级我们将基础圆角由 4px 调整为 2px。中后台产品以效率为第一优先级，圆角样式作为 UI 上的重要细节，更小的圆角从视觉上减少界面细节，提升了信息阅读效率。...用户需要通过 Form.create 的 HOC 方式获得表单实例，而通过 form.getFieldDecorator 来对组件进行数据绑定。... 我们发现大多数场景下，开发者其实只关注表单提交成功的值。...因而我们提供了 onFinish ，其只会在表单验证通过后触发，而 validateFields 不在需要。

3.2K3 0

Nest + Sharp 实现了一个 gif 压缩工具，帮我省不少钱

不知道大家有没有场景会需要 GIF 压缩，我是经常会用到。因为公众号的图片最大支持 10M，但是我录制出来的 GIF 经常超过 10M。...比如这样一个图片：在编辑器上传会提示超过 10 M 了：这时候就需要 GIF 压缩，不然文章发不了。...label="压缩级别" name="level" > 压缩 </...再需要压缩图片的时候，不用花钱买会员了，直接用自己的压缩工具就好了。

3362 0

Ant Disign 4.0 升级实践扑街指南 (一)

于是我敲下了第一行命令： sudo npm i -g @ant-design/codemod-v4 全局安装了这个代码转换工具，很顺利。...Form v3 & v4 去除 Form.create v4 的 Form 不再需要通过 Form.create() 创建上下文。...Form 组件现在自带数据域，因而 getFieldDecorator 也不再需要，直接写入 Form.Item 即可： // antd v3 const Demo = ({ form: { getFieldDecorator...640.gif codeOpen链接：codepen.io/scaukk/pen/… 提了个issue: github.com/ant-design/… 这个问题，一个热心网友说：加一个effect...结尾后面还有好多个页面需要改，不过我认为这是值得的。之后还会持续更新，希望大家都能避开这些点。图看不清楚的可以阅读原文。希望本文对大家有所帮助。

1.5K1 0

天天用 antd 的 Form 组件？自己手写一个吧

大家写中后台系统的时候，应该都用过 Ant Design 的 Form 组件：用 Form.Item 包裹 Input、Checkbox 等表单项，可以定义 rules，也就是每个表单项的校验规则。...errors、validator 这种就是不需要触发重新渲染的数据。然后 onValueChange 的时候就是修改 values 的值。..., cb: Function) => { validatorMap.current.set(name, cb); } const cls = classNames('ant-form...比如这种就不需要包装：创建两个 state，分别存储表单值 value 和 error。..., cb: Function) => { validatorMap.current.set(name, cb); } const cls = classNames('ant-form

2091 0

Antd 中 Form.Item name 属性不生效问题

问题 Form.Item 中设置了 name 属性，但是 Form 中的 onValuesChange 并没有生效。...这会导致以下结果： 1.你不再需要也不应该用 onChange 来做数据收集同步（你可以使用 Form 的 onValuesChange），但还是可以继续监听 onChange 事件。...注意 initialValues 不能被 setState 动态更新，你需要用 setFieldsValue 来更新。...file=/index.js:1256-1877 [2]官方: https://ant.design/components/form-cn/#Form.Item [3]cloneElement(): https...file=/src/Form/Field.tsx [5]难道没人对Form.Item如何处理Input感兴趣么: https://zhuanlan.zhihu.com/p/412418736

2.4K3 0

使用 antd 的 form 组件来自定义提交的数据格式

如图所示，提交的表单信息有需要填写多个的东西。数据类型为：数组(Array) 那么数组格式怎么用 form 组件来渲染呢？...{ Button, Col, Form, Input, Row } from "antd"; import { MinusCircleOutlined, PlusOutlined } from "@ant-design...如图自定义表单组件，在 Form.Item 组件下使用。 Form.Item子节点的props接收两个参数：value,onChange。...忽略上面的 Form.List*/} submit ); } 若需要使用表单验证自定义组件的值

3.6K0 0

react-开发经验分享-form表单组件中封装一个单独的input

在form表单中自定义封装一个input组件如果不做处理 form表单提交时是获取不到这个自定义组件的数据的这个坑对于新手来说真的是个大坑特别是对表单内的元素做提交不是很了解的人用ant的ui...框架来说明吧一个基础的表单 // ant表单组件 import { Form, Select, Input, Button } from 'antd'; const FormItem = Form.Item...App = Form.create({})(App); export default App; 如果我们要自定义Select组件在组件内部做后端数据请求并渲染到子元素Option里那么我们就需要从新封装自定义这个原生的.../OptGroup> ) } } export default SelectForm; 并把这个自定义组件导入到原来的form表单里 // 修改后的ant.../selectForm'; const FormItem = Form.Item; class App extends React.Component { handleSubmit = (e)

2.9K4 0

antd4与antd3Form表单设计区别

所以所有的子组件都会因父组件的重新render而render,浪费了性能 antd4思想：使用Context 包裹form表单，自定义一个store类，存储所有的表单value值，定义设置值和获取值得方法，因为不是组件内部状态，需要自己定义更新函数...，在每个Form.Item中定义forceUpdate()强制更新函数，当我们setValue值得时候，根据name值判断出要更新的Form.Item,可以调用该Item的更新函数更新，相比ant3节约了性能...（个人觉得这个思想类似Vue了，涉嫌抄袭） ant4简单原理展示基本用法,拷贝整理下可测试 //FormPage页面函数组件和类组件略有差异，类组件会用到神奇的React.forwardRef...return ( <Form.Item...Log in </div

1.9K2 0

Ant Design

add antd yarn add axios # 表单提交表单可以直接用回调函数里面的values获取值重置表单数据 form.resetFields() # 表格Table 默认key往往不是，需要自定义...columns={columns} dataSource={data.list} rowKey="id" pagination={false} /> # 单元格数据再处理如下图权限展示，是一个对象数组，需要再处理...: '角色名称' }]} > <Form.Item shouldUpdate...isAdd, message: 'id' }]} hidden > <Form.Item...material-ui: http://www.material-ui.com/#/ github: https://github.com/callemall/material-ui https://ant.design

2.8K1 0

前端实现人员关系图谱

当时听完这个需求，觉得可能还是蛮简单的，后来动手做的时候，发现族谱的连线，是需要根据返回的数据动态生成的，这就是我这个小前端，有点头秃了。...开始动手首先需要安装ant-design/charts，具体安装过程请参考官方文档。.../Treechart.css"; import { Modal } from "antd"; import { OrganizationGraph } from "@ant-design...Tooltip, DatePicker, Select } from "antd"; import { PlusCircleTwoTone, EditTwoTone } from "@ant-design...> <Form.Item label="生日" name={ "date"} required> <DatePicker

9502 0

antd表单设置数组字段

在使用React+ant design进行开发时通常使用Form组件，但是很多时候我们某一个字段是二维数组。...在开发中只需要采取map对多维数组进行遍历即可：通过索引值进行条件渲染，或者定义一个数组使用map的index参数进行渲染，不在需要条件判断。使用field中提供的key也可以，也是索引值。... {fields => fields.map((field, index) => ( 升序 )} </Form.Item

2.3K2 0

前端开发者们，这些知识tips你必须知道

node_modules/@ant-design/pro-card npm ERR!...这样可以确保在不同屏幕尺寸和分辨率下，UI 元素的大小和间距能够自适应地调整，提高网站或应用的可访问性和用户体验。...： :global { .ant-dropdown .ant-dropdown-menu { box-shadow: 0px 7.41667px 22.25px rgba(54, 88, 255...important; } } } } 14、关于根据设计稿制作网页时的屏幕适配、缩放操作适配问题 14-1 不要使用设计稿的决定定位我们还原设计稿时，对于分出的每个组件的最外层的...**** 这种方式的优点是服务器不需要为每个访问请求进行单独的 cookie-session 保存，整个流程的 stateless 特点也使得服务器可以更轻松地进行水平扩展以支持高并发。

4341 0

前端开发者必须知道的日常小技巧！

2481 0

如何设计实现H5营销页面搭建系统

但真正准备去落地的时候，发现其中的细节特别多，也包含了很多的设计理念在里面。我们先来看一下原型图，然后仔细分析一下需要做的事情：市面上大部分营销可视化搭建系统基本都是类似上图这样的页面呈现。... ); })} ); }; 表单区域具体表单项发生改变后就会触发onValuesChange，也就是ant...组件开发/维护来看上面提到的最后一个问题：组件库如何维护（考虑新增组件满足业务需要的场景）。...每个组件原则上只是呈现上的不同，对于约定俗成地组件研发规范则必须遵守。至于如何去限制，可以通过文档（弱）或者 cli（强）去做。模板除了上面的几个问题，还有一个点没提到：模板。...其实无论是组件动态加载还是组件schema的设计、数据结构的设计、组件库的维护等，每个团队都可以制定一套适合自己的规范，没有绝对的对错之分。

1.2K2 0

React 实现一个markdown

对于这种整个页面的讲解，可能我的讲解不是很有用，还是需要自己去读代码。我们还是分步骤讲解一下。最后我会把上一篇和这一篇的代码都放到后面。...onClose} // 是否显示抽屉 visible={visible} // 抽屉宽度 width={500} // 如果不需要... )} > 我们的Form内容 Form 我们的Form写到内部，每一项内容都用<Form.Item...当imageUrl没有值的时候渲染图标，当是加在的时候渲染loading图标，当是添加的时候渲染PlusOutlined图标 .../type'; import { TagsFilled, LoadingOutlined, PlusOutlined } from '@ant-design/icons'; /** * 组件外声明只加载一次

1.2K3 0

类型即正义：TypeScript 从入门到实践（序章）

提示Ant Design [19]是蚂蚁金服孵化的一套企业级产品设计体系，提供了完备的 TS 类型定义，使得我们可以很方便的在 TS 项目中使用，在最近发布了 4.0 版本，致力于创造高效愉悦的工作体验...Mobile[21] 开箱即用的中台前端/设计解决方案：Ant Design Pro[22] 插画设计：海兔[23] 一款为设计者提升工作效率的 Sketch 工具集：Kitchen[24] 后面图雀社区计划围绕...Ant Design 生态撰写一系列教程，帮助大家提高设计、开发效率，敬请期待！...，比如这里需要配置 antd 的按需引用。...name="todo"> <div

1.5K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云