Ant Design 表单基础用法综合示例

Ant Design 的表单组件设计得非常出色,极大地简化了表单开发的复杂度,让开发者能够快速构建出功能丰富、交互友好的表单界面。
在这里插入图片描述

接下来总结一下 Ant Design 中表单的基本用法。

  1. Form 组件

    • 用于定义整个表单,可以设置表单的布局方式、提交行为等。
    • 通常会将表单字段组件嵌套在 Form 内部使用。
  2. 表单字段组件

    • 包括 InputSelectCheckboxRadio 等常见的表单控件组件。
    • 这些组件可以通过设置 name 属性与表单数据进行绑定。
  3. 表单布局

    • Ant Design 提供了两种常见的表单布局方式: 水平布局和垂直布局。
    • 可以通过 Form 组件的 layout 属性进行设置, 默认为水平布局。
  4. 表单校验

    • Ant Design 内置了强大的表单校验功能,开发者可以使用 rules 属性定义校验规则。
    • 当表单提交时,表单会自动进行校验,并在发现错误时进行提示。
  5. 表单提交

    • 通过 onFinish 属性可以监听表单提交事件,在此回调函数中处理表单数据的提交逻辑。
    • 表单组件会自动管理表单的提交状态,开发者只需关注业务逻辑即可。
  6. 表单重置

    • 表单组件提供了 resetFields 方法用于重置表单数据。
    • 通常可以在表单的 “重置” 按钮的 onClick 事件中调用该方法。

示例:Ant Design 表单的基本用法,包括字段定义、布局、校验和提交、重置、回显示数据常用功能。
在这里插入图片描述

import React from 'react';
import { Form, Input, Select, Checkbox, Button,Space} from 'antd';const { Option } = Select;const MyForm = () => {const [form] = Form.useForm();const onFinish = (values) => {console.log('Received values of form:', values);};const onReset = () => {form.resetFields();};const onFill = () => {form.setFieldsValue({ username: '三丰',password:"123", gender: 'male' });};return (<Form name="myForm" form={form}  onFinish={onFinish} layout="vertical" style={{margin:"15px"}}><Form.Itemlabel="Username"name="username"rules={[{ required: true, message: 'Please input your username!' }]}><Input /></Form.Item><Form.Itemlabel="Password"name="password"rules={[{ required: true, message: 'Please input your password!' }]}><Input.Password /></Form.Item><Form.Itemlabel="Gender"name="gender"rules={[{ required: true, message: 'Please select your gender!' }]}><Select><Option value="male">Male</Option><Option value="female">Female</Option><Option value="other">Other</Option></Select></Form.Item><Form.Itemname="remember"valuePropName="checked"wrapperCol={{ offset: 0, span: 24 }}><Checkbox>Remember me</Checkbox></Form.Item><Form.Item wrapperCol={{ offset: 0, span: 24 }}><Space><Button type="primary" htmlType="submit">Submit</Button><Button htmlType="button" onClick={onReset}>Reset</Button><Button type="dashed" htmlType="button" onClick={onFill}>Fill form</Button></Space></Form.Item></Form>);
};export default MyForm;
  1. 我们首先引入了 Ant Design 提供的表单相关组件,包括 Form, Input, Select, CheckboxButton

  2. MyForm 组件中,我们使用 Form 组件定义了整个表单。通过 onFinish 属性指定了表单提交时的处理逻辑。

  3. 接下来,我们使用 Form.Item 组件定义了表单字段,分别包括 Username, Password, GenderRemember me 复选框。

  4. 每个 Form.Item 都有一个 name 属性,用于标识该字段在表单数据中的 key。

  5. 我们还通过 rules 属性为每个字段定义了校验规则,确保用户输入的数据符合要求。

  6. 最后,我们添加了3个按钮,当用户点击按钮时,分别会自动进行校验并触发 onFinish 回调函数 提交表单、重置表单、回填表单数据。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/818488.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

利用栈删除数组中重复元素

先将数据排序&#xff08;降序或升序&#xff09; 建立一个“栈”&#xff0c;三种情况&#xff1a; 1.栈为空&#xff1a;压入一个元素 2.栈不为空 且 栈顶元素不等于将入栈元素&#xff1a;压入一个元素 3.栈不为空 且 栈顶元素等于将入栈元素&#xff1a;删除将压入元素…

【学习笔记十一】EWM上架目标仓位确定过程及配置

一、EWM确定目标区域概述 1.EWM从仓库处理类型获取源仓库类型&#xff08;Source storage type&#xff09;和源仓位&#xff08;Source Bin&#xff09;2.EWM根据仓库类型&#xff08;storage type&#xff09;、仓库分区&#xff08;storage section&#xff09;和上架策略&a…

Matlab|基于广义Benders分解法的综合能源系统优化规划

目录 1 主要内容 广义benders分解法流程图&#xff1a; 优化目标&#xff1a; 约束条件&#xff1a; 2 部分代码 3 程序结果 4 下载链接 1 主要内容 该程序复现文章《综合能源系统协同运行策略与规划研究》第四章内容基于广义Benders分解法的综合能源系统优化规划&…

Python开源工具库使用之词云Wordcloud

文章目录 前言一、基本使用1.1 文本生成词云1.2 配置项 二、进阶用法2.1 自定义形状2.2 自定义着色2.3 自定义词频2.4 中文 三、实际案例3.1 工作报告词云3.2 周杰伦歌词词云 四、总结4.1 优点和局限性4.2 展望未来发展 参考 前言 当我们需要将大量文本数据可视化展示时&#…

单链表和文件操作使用练习:通讯录

1. 项目文件组成&#xff08;vs2022&#xff09; 1. Contact.h和Contact.c分别为实现通讯录的头文件和源文件。 2. SList.h和SList.c分别为实现单链表的头文件和源文件。 3. test.c为测试用的源文件&#xff0c;用于调用通讯录提供的函数。 4. Contact.txt用于存储联系人信息。…

【热门话题】PyTorch:深度学习领域的强大工具

&#x1f308;个人主页: 鑫宝Code &#x1f525;热门专栏: 闲话杂谈&#xff5c; 炫酷HTML | JavaScript基础 ​&#x1f4ab;个人格言: "如无必要&#xff0c;勿增实体" 文章目录 PyTorch&#xff1a;深度学习领域的强大工具一、PyTorch概述二、PyTorch核心特性…

【华为OD机试】围棋的气【C卷|100分】

题目描述 围棋棋盘由纵横各19条线垂直相交组成,棋盘上一共19 x 19 = 361 个交点, 对弈双方一方执白棋,一方执黑棋,落子时只能将棋子置于交点上。 “气”是围棋中很重要的一个概念,某个棋子有几口气,是指其上下左右方向四个相邻的交叉点中, 有几个交叉点没有棋子,由此可…

RabbitMQ消息模型之Direct消息模型

Direct消息模型 * 路由模型&#xff1a; * 一个交换机可以绑定多个队列 * 生产者给交换机发送消息时&#xff0c;需要指定消息的路由键 * 消费者绑定队列到交换机时&#xff0c;需要指定所需要消费的信息的路由键 * 交换机会根据消息的路由键将消息转发到对应的队…

解锁创意无限,体验全新Adobe Illustrator 2021 for mac/Win中文版

在数字化创意的浪潮中&#xff0c;Adobe Illustrator 2021中文版无疑是设计师们的得力助手。这款软件集高效、便捷、创新于一体&#xff0c;无论是Mac还是Windows用户&#xff0c;都能在其中找到属于自己的创意空间。 Adobe Illustrator 2021中文版延续了其强大的矢量图形处理…

循环双链表的操作

归纳编程学习的感悟&#xff0c; 记录奋斗路上的点滴&#xff0c; 希望能帮到一样刻苦的你&#xff01; 如有不足欢迎指正&#xff01; 共同学习交流&#xff01; &#x1f30e;欢迎各位→点赞 &#x1f44d; 收藏⭐ 留言​&#x1f4dd; 每一个裂缝都是为透出光而努力&#…

FFmpeg: 自实现ijkplayer播放器--04消息队列设计

文章目录 播放器状态转换图播放器状态对应的消息&#xff1a; 消息对象消息队列消息队列api插入消息获取消息初始化消息插入消息加锁初始化消息设置消息参数消息队列初始化清空消息销毁消息启动消息队列终止消息队列删除消息 消息队列&#xff0c;用于发送&#xff0c;设置播放…

[lesson33]C++中的字符串类

C中的字符串类 历史遗留问题 C语言不支持真正意义上的字符串C语言用字符数组和一组函数实现字符串操作C语言不支持自定义类型&#xff0c;因此无法获得字符串类型 解决方案 从C到C的进化过程引入自定义类型在C中可以通过类完成字符串类型的定义 标准库中的字符串类 C语言直…

学鸿蒙开发的优劣势,你清楚吗?建议你了解一下!

随着科技的不断发展和智能设备的普及&#xff0c;鸿蒙系统作为华为自主研发的操作系统&#xff0c;正逐渐受到市场的关注。2024年&#xff0c;学鸿蒙开发是否有前途&#xff0c;成为了很多开发者关心的问题。本文将从多个角度分析鸿蒙系统的发展前景&#xff0c;以及学习鸿蒙开…

Android使用shape属性绘制边框内渐变色

目录 先上效果图实现方法shape属性介绍代码结果 先上效果图 这是使用AndroidStudio绘制的带有渐变色的边框背景色 实现方法 项目中由于UI设计需求&#xff0c;需要给按钮、控件设置带有背景色效果的。以下是UI效果图。 这里我们使用shape属性来绘制背景效果。 shape属性介…

Leetcode-48-旋转图像

题目说明 给定一个 n n 的二维矩阵表示一个图像。 将图像顺时针旋转 90 度。 说明&#xff1a;你必须在原地旋转图像&#xff0c;这意味着你需要直接修改输入的二维矩阵。请不要使用另一个矩阵来旋转图像。 示例 1: 给定 matrix [ [1,2,3], [4,5,6], [7,8,9] ], 原地旋转输入…

如何在横向渗透攻击中寻到一线生机

横向渗透&#xff0c;作为计算机网络中的一种攻击技术&#xff0c;展现出了攻击者如何巧妙地利用同一级别系统间的漏洞和弱点&#xff0c;扩大其网络访问权限。与纵向渗透不同&#xff0c;横向渗透不关注权限的垂直提升&#xff0c;而是更侧重于在同一层级内扩展影响力。 横向…

Python数据容器(一)

一.数据容器入门 1.Python中的数据容器&#xff1a;一种可以容纳多份数据的数据类型&#xff0c;容纳的每一份数据称之为1个元素&#xff0c;每一个元素&#xff0c;可以是任意类型的数据&#xff0c;如字符串、数字、布尔等。 2.数据容器根据特点的不同&#xff0c;如&#…

VTK —— 一、Windows10下编译VTK源码,并用Vs2017代码测试(附编译流程、附编译好的库、vtk测试源码)

效果 编译 1、下载VTK8.2.0源码        2、解压源码后&#xff0c;进入目录创建build目录&#xff0c;同时在build内创建install目录 (下图install目录是在cmake第一次后才手动创建&#xff0c;建议在创建build时创建)        3、打开CMake&#xff0c;如下图填入…

卷积神经网络结构组成与解释

卷积神经网络结构组成与解释 卷积神经网络是以卷积层为主的深度网路结构&#xff0c;网络结构包括有卷积层、激活层、BN层、池化层、FC层、损失层等。卷积操作是对图像和滤波矩阵做内积&#xff08;元素相乘再求和&#xff09;的操作。 1. 卷积层 常见的卷积操作如下&#x…

UE5学习日记——实现自定义输入及监听输入,组合出不同的按键输入~

UE5的自定义按键和UE4有所不同&#xff0c;在这里记录一下。 本文主要是记录如何设置UE5的自定义按键&#xff0c;重点是学会原理&#xff0c;实际开发时结合实际情况操作。 输入映射 1. 创建输入操作 输入操作并不是具体的按键映射&#xff0c;而是按键的激活方式&#xff0…