当前位置: 首页 > news >正文

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 回调函数 提交表单、重置表单、回填表单数据。

相关文章:

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

Ant Design 的表单组件设计得非常出色,极大地简化了表单开发的复杂度,让开发者能够快速构建出功能丰富、交互友好的表单界面。 接下来总结一下 Ant Design 中表单的基本用法。 Form 组件 用于定义整个表单,可以设置表单的布局方式、提交行为等。通常会将表单字段组件嵌套在 F…...

MWeb Pro For Mac v4.5.9 强大的 Markdown 软件中文版

MWeb 是专业的 Markdown 写作、记笔记、静态博客生成软件&#xff0c;目前已支持 Mac&#xff0c;iPad 和 iPhone。MWeb 有以下特色&#xff1a; 软件下载&#xff1a;MWeb Pro For Mac v4.5.9 软件本身&#xff1a; 使用原生的 macOS 技术打造&#xff0c;追求与系统的完美结合…...

Git常用命令详解:掌握版本控制的核心操作

Git作为世界上最流行的分布式版本控制系统&#xff0c;以其强大的分支管理、高效的协同工作能力和完善的版本追溯功能&#xff0c;深受广大开发者喜爱。熟练掌握Git的常用命令是每一位程序员必备的技能。本文将深入解析Git中那些最为基础且实用的命令&#xff0c;助您在日常开发…...

Vue链接跳转地址 href 中有参数带有#

Vue链接跳转地址 href 中有参数带有# A跳转B 带参数backURL 转码一次会被浏览器解码 xxxx?backurlencodeURIComponent(url) 到B页面拿到的query 值取不到 需要对地址转码两次才能取值成功 xxxx?backurlencodeURIComponent(encodeURIComponent(url))...

python 会员信息管理系统2.0

问题介绍 综合案例实现&#xff1a;会员管理系统设计与实现-V3 利用所学习的知识点 ,结合会员管理系统的分析与实现&#xff0c; 了解面向对象开发过程中类内部功能的分析方法&#xff0c;系统讲解 Python语法、控制结构、四种典型序列 ,函数定义以及面向对象语法和模块的应用…...

HTTP的强制缓存和协商缓存

HTTP的强制缓存和协商缓存 HTTP的缓存技术强制缓存ExpiresCache-Control 协商缓存If-Modified-Since和Last-ModifiedIf-None-Match和ETag优先级 可被缓存的请求方法总结 HTTP的缓存技术 当我们进行HTTP请求时&#xff0c;需要将请求报文发送给对端&#xff0c;当服务端收到请求…...

Prometheus-Grafana基础篇安装绘图

首先Prometheus安装 1、下载 https://prometheus.io/download/ 官网路径可以去这儿下载 2、如图&#xff1a; 3.解压&#xff1a; tar -xf prometheus-2.6.1.linux-amd64 cd prometheus-2.6.1.linux-amd64 4.配置文件说明&#xff1a; vim prometheus.yml 5.启动Promethe…...

探索艺术的新领域——3D线上艺术馆如何改变艺术作品的传播方式

在数字化时代的浪潮下&#xff0c;3D线上艺术馆成为艺术家们展示和传播自己作品的新平台。不仅突破了地域和物理空间的限制&#xff0c;还提供了全新的互动体验。 一、无界限的展示空间&#xff1a;艺术家的新展示平台 3D线上艺术馆通过数字化技术&#xff0c;为艺术家提供了一…...

[dvwa] file upload

file upload 0x01 low 直接上传.php 内容写<? eval($_POST[jj]);?> 用antsword连 路径跳两层 0x02 medium 添加了两种验证&#xff0c;格式为图片&#xff0c;大小限制小于1000 上传 POST /learndvwa/vulnerabilities/upload/ HTTP/1.1 Host: dvt.dv Content-Le…...

pygame发射子弹后绘制射线

import pygame import sys import mathpygame.init()screen pygame.display.set_mode((800, 600)) pygame.display.set_caption("Rotate and Shoot Bullets")# 定义子弹类 class Bullet:def __init__(self, x, y, angle):self.x xself.y yself.angle angleself.s…...

逻辑回归都有什么类型

逻辑回归是一种用于解决分类问题的统计学习方法&#xff0c;它基于概率理论&#xff0c;将输入特征与输出类别之间的关系建模为一个概率分布。逻辑回归模型可以用不同的方法来表示&#xff0c;其中包括&#xff1a; 1. **基本逻辑回归模型**&#xff1a;最简单的逻辑回归模型假…...

基于springboot+vue实现的高校宿舍管理系统(界面优美,十分推荐)

一、项目简介 本项目是一套基于springbootvue实现的高校宿舍管理系统设计与实现 包含&#xff1a;项目源码、数据库脚本等&#xff0c;该项目附带全部源码可作为毕设使用。 项目都经过严格调试&#xff0c;eclipse或者idea 确保可以运行&#xff01; 该系统功能完善、界面美观…...

C语言学习笔记day18

1. 指针基本概念 1.地址:用来区分内存中不同字节的编号 2.指针:地址就是指针,指针就是地址 3.指针变量:存储指针的变量,有时去掉变量,称为指针 2. 指针运算符 1.&: 1.获得一个变量在内存空间中的首地址 2.让表达式类型升级 2.*: 1.取…...

JSP内置对象session

1.session对象&#xff0c;为会话对象&#xff0c;封装当前用户会话中的有关信息。 网页数据传递是单向传递的&#xff0c;session能够将数据进行多个数据互相传递&#xff0c;使用的是同一个东西 实例1&#xff1a; 利用session对象String getId() 方法获取当前session对象…...

BM96 主持人调度(二)(贪心算法)

一开始写的时候忘了给start、end数组赋值了 import java.util.*;public class Solution {/*** 代码中的类名、方法名、参数名已经指定&#xff0c;请勿修改&#xff0c;直接返回方法规定的值即可** 计算成功举办活动需要多少名主持人* param n int整型 有n个活动* param start…...

【TB作品】MSP430单片机读取大气压强传感器BMP180

文章目录 实物main所有代码 实物 main #include <msp430.h> #include "stdio.h" #include "OLED.h"#include <stdio.h> #include <stdlib.h> #include <string.h> #include <math.h>// P2.2 oled scl // P2.3 oled sda// p…...

Github第一Star数的国产免费开源防火墙--雷池社区版初步体验

前言 近期准备搭建一个博客网站&#xff0c;用来存储工作室同学们的学习笔记。服务器准备直接放在公网上&#xff0c;方便大家随时随地的上传和浏览&#xff0c;为了防止网站被人日穿成为肉鸡&#xff0c;一些防御措施还是要部署的。 首先明确自己的需求&#xff1a; 零成本…...

自动驾驶涉及相关的技术

自动驾驶涉及多种技术&#xff0c;包括传感器、数据处理、决策制定和执行控制等方面。以下是一些关键技术的详细说明&#xff1a; 传感器技术&#xff1a; 激光雷达&#xff08;LiDAR&#xff09;&#xff1a;激光雷达通过发射激光束并测量其反射时间来获取周围环境的高精度三维…...

简单高效的GO发票识别+发票查验接口

在这个瞬息万变的商业世界里&#xff0c;商业欺诈如影随形&#xff0c;虚假发票成为企业难以忽视的风险。而发票作为每笔交易的重要凭证&#xff0c;对其进行入账前的真伪查验显得尤为重要。但面对海量的发票查验与发票录入工作&#xff0c;人工手动查验的方式&#xff0c;速度…...

c++和python基本数据类型比较

以下是 C 和 Python 中一些基本数据类型的比较&#xff1a; 1. 整数类型&#xff1a; C&#xff1a; C 中的整数类型包括 int, short, long, long long 等&#xff0c;它们的大小和范围取决于编译器和操作系统。 Python&#xff1a; Python 中只有一个整数类型 int&#xff0…...

铭豹扩展坞 USB转网口 突然无法识别解决方法

当 USB 转网口扩展坞在一台笔记本上无法识别,但在其他电脑上正常工作时,问题通常出在笔记本自身或其与扩展坞的兼容性上。以下是系统化的定位思路和排查步骤,帮助你快速找到故障原因: 背景: 一个M-pard(铭豹)扩展坞的网卡突然无法识别了,扩展出来的三个USB接口正常。…...

STM32标准库-DMA直接存储器存取

文章目录 一、DMA1.1简介1.2存储器映像1.3DMA框图1.4DMA基本结构1.5DMA请求1.6数据宽度与对齐1.7数据转运DMA1.8ADC扫描模式DMA 二、数据转运DMA2.1接线图2.2代码2.3相关API 一、DMA 1.1简介 DMA&#xff08;Direct Memory Access&#xff09;直接存储器存取 DMA可以提供外设…...

JVM暂停(Stop-The-World,STW)的原因分类及对应排查方案

JVM暂停(Stop-The-World,STW)的完整原因分类及对应排查方案,结合JVM运行机制和常见故障场景整理而成: 一、GC相关暂停​​ 1. ​​安全点(Safepoint)阻塞​​ ​​现象​​:JVM暂停但无GC日志,日志显示No GCs detected。​​原因​​:JVM等待所有线程进入安全点(如…...

精益数据分析(97/126):邮件营销与用户参与度的关键指标优化指南

精益数据分析&#xff08;97/126&#xff09;&#xff1a;邮件营销与用户参与度的关键指标优化指南 在数字化营销时代&#xff0c;邮件列表效度、用户参与度和网站性能等指标往往决定着创业公司的增长成败。今天&#xff0c;我们将深入解析邮件打开率、网站可用性、页面参与时…...

laravel8+vue3.0+element-plus搭建方法

创建 laravel8 项目 composer create-project --prefer-dist laravel/laravel laravel8 8.* 安装 laravel/ui composer require laravel/ui 修改 package.json 文件 "devDependencies": {"vue/compiler-sfc": "^3.0.7","axios": …...

LeetCode - 199. 二叉树的右视图

题目 199. 二叉树的右视图 - 力扣&#xff08;LeetCode&#xff09; 思路 右视图是指从树的右侧看&#xff0c;对于每一层&#xff0c;只能看到该层最右边的节点。实现思路是&#xff1a; 使用深度优先搜索(DFS)按照"根-右-左"的顺序遍历树记录每个节点的深度对于…...

使用Spring AI和MCP协议构建图片搜索服务

目录 使用Spring AI和MCP协议构建图片搜索服务 引言 技术栈概览 项目架构设计 架构图 服务端开发 1. 创建Spring Boot项目 2. 实现图片搜索工具 3. 配置传输模式 Stdio模式&#xff08;本地调用&#xff09; SSE模式&#xff08;远程调用&#xff09; 4. 注册工具提…...

安全突围:重塑内生安全体系:齐向东在2025年BCS大会的演讲

文章目录 前言第一部分&#xff1a;体系力量是突围之钥第一重困境是体系思想落地不畅。第二重困境是大小体系融合瓶颈。第三重困境是“小体系”运营梗阻。 第二部分&#xff1a;体系矛盾是突围之障一是数据孤岛的障碍。二是投入不足的障碍。三是新旧兼容难的障碍。 第三部分&am…...

Unity VR/MR开发-VR开发与传统3D开发的差异

视频讲解链接&#xff1a;【XR马斯维】VR/MR开发与传统3D开发的差异【UnityVR/MR开发教程--入门】_哔哩哔哩_bilibili...

数据分析六部曲?

引言 上一章我们说到了数据分析六部曲&#xff0c;何谓六部曲呢&#xff1f; 其实啊&#xff0c;数据分析没那么难&#xff0c;只要掌握了下面这六个步骤&#xff0c;也就是数据分析六部曲&#xff0c;就算你是个啥都不懂的小白&#xff0c;也能慢慢上手做数据分析啦。 第一…...