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;删除将压入元素…

面试经典150题——合并两个有序数组

面试经典150题 day1 题目来源我的题解方法一 先合并&#xff0c;再排序方法二 逆向双指针 题目来源 力扣每日一题&#xff1b;题序&#xff1a;88 我的题解 方法一 先合并&#xff0c;再排序 先将nums2全部放到nums1之后&#xff0c;然后进行排序。 时间复杂度&#xff1a;O…

【学习笔记十一】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 展望未来发展 参考 前言 当我们需要将大量文本数据可视化展示时&#…

js数字、字母、符号等半角文本按0.5个字符计算长度

半角文本按0.5个字符计算 封装 getEffectiveLength 方法 function getEffectiveLength(text) {// 使用正则表达式替换掉所有全角字符&#xff0c;然后获取替换后的字符串长度var halfWidthLength text.replace(/[^\x00-\xff]/g, "").length;// 原始字符串长度减去…

LeetCode热题Hot100 - 两两交换链表中的节点

一刷~ 给你一个链表&#xff0c;两两交换其中相邻的节点&#xff0c;并返回交换后链表的头节点。你必须在不修改节点内部的值的情况下完成本题&#xff08;即&#xff0c;只能进行节点交换&#xff09;。 思路&#xff1a; 使用两个指针p1/p2&#xff0c;分别记录需要交换的两…

Codeforces Round 935 (Div. 3)------>C. Left and Right Houses

一&#xff0c;思路&#xff1a;直接从左到右枚举即可&#xff0c;用两个变量来维护左边的0的个数&#xff0c;右边1的个数。这题可能你会把四舍五入看成向上取整导致错误。 二&#xff0c;代码&#xff1a; #include <iostream> #include<algorithm> #include&l…

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

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

Java中二维数组的使用

在Java编程中&#xff0c;二维数组是一个非常重要的数据结构&#xff0c;它实质上是数组的数组&#xff0c;即每个元素又是一个数组。对于初学者来说&#xff0c;理解二维数组的概念、初始化、遍历、默认值以及内存分配和使用注意事项是提升编程技能的关键。 一、二维数组的概…

Bash运行环境详解与陷阱分析

摘要&#xff1a; 本文深入探讨了Bash运行环境的各个方面&#xff0c;包括Shell的概念、子Shell的行为、环境变量的管理以及Bash中的通配符和转义问题。同时&#xff0c;我们还将介绍一些常见的Bash陷阱&#xff0c;帮助读者避免在使用Bash时可能遇到的问题。 Shell 运行环境概…

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

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

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

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

c语言之结构体指针

一个结构体的初始位置就是结构体指针。 用一个指针变量存储结构体指针就是一个结构体指针变量 #include<stdio.h> #include<string.h> int main() {struct test{char name[30];int age;char sex;int student_number;} lisi{"lisi",32,m,20190305};stru…

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;以及学习鸿蒙开…