React 实现表单组件
表单是html的基础元素,接下来我会用React实现一个表单组件。支持包括输入状态管理,表单验证,错误信息展示,表单提交,动态表单元素等功能。
数据状态
表单元素的输入状态管理,可以基于react state 实现。
const [formData, setFormData] = useState(initial_data);
参数校验
在表单元素变更后,对变更结果进行验证,若验证失败,则更新失败状态,若验证成功,则更新数据状态, 并移除之前老的失败状态。
/*** 表单错误状态*/
const [errors, setErrors] = useState({});/*** 表单数据变更处理函数*/
const setFieldData = (name, value) => {// 进行参数校验if (validators && validators[name]) {const error = validators[name](value);if (error) {setErrors((errors) => ({...errors, [name]: error}));return;}setErrors((errors) => {const newErrors = {...errors};delete newErrors[name];return newErrors;})}// 更新表单数据setFormData({...formData,[name]: value});
}
表单提交
表单提交需要判断是否有校验失败错误,如果有的话提交失败,如果没有提交成功。
/*** 表单提交处理函数*/
const handleSubmit = (e) => {e.preventDefault();if (errors && Object.keys(errors).length > 0) {console.log('表单校验未通过');return;}if (submitFunc) {console.log('开始执行提交函数');submitFunc(formData);}
}
表单项组件
表单项组件会根据参数不同的类型返回不同的组件,并且error和fieldData,setFieldData与父组件Form绑定。
/*** 表单项组件*/
const FormItem = ({name, type, error, label, fieldData, setFieldData}) => {if (type === 'submit') {return (<div><input type="submit" value={label}/></div>)} else if (type === 'text') {return (<div><label htmlFor={name}>{label}</label><input type="text" name={name} value={fieldData} onChange={e => setFieldData(name, e.target.value)}/>{error && <span>{error}</span>}</div>)} else if (type === 'password') {return (<div><label htmlFor={name}>{label}</label><input type="password" name={name} value={fieldData}onChange={e => setFieldData(name, e.target.value)}/>{error && <span>{error}</span>}</div>)}return null;
}
组件整体代码
Form组件是基于React实现,并对表单form的功能进行日常封装。
import {useState} from "react";/*** 表单组件* @param initial_data 初始数据* @param validators 校验器* @param submitFunc 提交函数* @param children FormItem组件列表*/
const Form = ({initial_data, validators, submitFunc, children}) => {/*** 表单数据状态*/const [formData, setFormData] = useState(initial_data);/*** 表单错误状态*/const [errors, setErrors] = useState({});/*** 表单数据变更处理函数*/const setFieldData = (name, value) => {// 进行参数校验if (validators && validators[name]) {const error = validators[name](value);if (error) {setErrors((errors) => ({...errors, [name]: error}));return;}setErrors((errors) => {const newErrors = {...errors};delete newErrors[name];return newErrors;})}// 更新表单数据setFormData({...formData,[name]: value});}/*** 表单提交处理函数*/const handleSubmit = (e) => {e.preventDefault();if (errors && Object.keys(errors).length > 0) {console.log('表单校验未通过');return;}if (submitFunc) {console.log('开始执行提交函数');submitFunc(formData);}}return (<><div><form onSubmit={handleSubmit}>{children.map((child, index) => {return (<FormItemkey={index}name={child.props.name}label={child.props.label}error={errors[child.props.name]}type={child.props.type}setFieldData={setFieldData}>{child}</FormItem>)})}</form></div></>)
}/*** 表单项组件*/
const FormItem = ({name, type, error, label, fieldData, setFieldData}) => {if (type === 'submit') {return (<div><input type="submit" value={label}/></div>)} else if (type === 'text') {return (<div><label htmlFor={name}>{label}</label><input type="text" name={name} value={fieldData} onChange={e => setFieldData(name, e.target.value)}/>{error && <span>{error}</span>}</div>)} else if (type === 'password') {return (<div><label htmlFor={name}>{label}</label><input type="password" name={name} value={fieldData}onChange={e => setFieldData(name, e.target.value)}/>{error && <span>{error}</span>}</div>)}return null;
}export {Form, FormItem};
使用样例
效果图见下图,使用样例代码见下方代码。 
function App() {return (<div><Form submitFunc={(data) => console.log(data)} initial_data={{username: 'vicyor', password: '123456'}}validators={{password: (val) => {if (val.length < 6) {return '密码长度不能小于6';}}}}>< FormItem name="username" label="用户名" type='text'/><FormItem name="password" label="密码" type='password'/><FormItem name="submit" label="提交" type='submit'/></Form></div>);
}相关文章:
React 实现表单组件
表单是html的基础元素,接下来我会用React实现一个表单组件。支持包括输入状态管理,表单验证,错误信息展示,表单提交,动态表单元素等功能。 数据状态 表单元素的输入状态管理,可以基于react state 实现。 …...
PlantUML绘制UML图教程
UML(Unified Modeling Language)是一种通用的建模语言,广泛用于软件开发中对系统进行可视化建模。PlantUML是一款强大的工具,通过简单的文本描述,能够生成UML图,包括类图、时序图、用例图等。PlantUML是一款…...
自学Python第二十二天- Django框架(六) django的实用插件:cron、APScheduler
django-crontab 和 django-cron 有时候需要django在后台不断的执行一个任务,简单的可以通过中间件来实现,但是中间件是根据请求触发的。如果需要定时执行任务,则需要使用到一些插件。 django-crontab 和 django-cron 是常用的用于处理定时任…...
医院挂号预约|医院挂号预约小程序|基于微信小程序的医院挂号预约系统设计与实现(源码+数据库+文档)
医院挂号预约小程序目录 目录 基于微信小程序的医院挂号预约系统设计与实现 一、前言 二、系统功能设计 三、系统实现 1、小程序用户端 2、系统服务端 (1) 用户管理 (2)医院管理 (3)医生管理 &…...
网络选择流程分析(首选网络类型切换流程)
首先是界面,我在此平台的界面如下: 对应的入口源码位置在Settings的UniEnabledNetworkModePreferenceController中,当然其他平台可能在PreferredNetworkModePreferenceController中,流程上都是大同小异 然后点击切换按钮会调用到UniEnabledNetworkModePreferenceControlle…...
AutoSAR(基础入门篇)6.1-Vector的汽车电子开发工具链简介
目录 前言 一、PREEvision 二、vVIRTUALtarget 三、DaVinci 四、CANoe 五、CANape 其他 前言 因为国内用...
TI的电量计驱动在卸载时导致Linux卡死
背景 最近移植TI电量计芯片bq40z50的驱动,移植完毕后,能正常读取电池信息了,但是无意中发现驱动卸载会导致Linux卡死,死前终端闪过大量打印,将putty的缓冲区都耗尽了,必须启用syslog转发并用visual syslog…...
使用yolo训练自己的模型
YOLO(You Only Look Once)是一种用于目标检测的深度学习模型,旨在实时检测图像或视频中的多个对象。与传统的目标检测方法不同,YOLO一次性处理整个图像,而不是通过滑动窗口或区域提议进行多次检测。这种方法使得YOLO在…...
堆的概念实现
前言 本文将详细讲解堆。堆是一种二叉树(一般是完全二叉树)使用顺序结构的数组来存储。 tip:这里我们需要注意区分堆在不同地方的含义,这里的堆是一个数据结构,操作系统虚拟进程地址空间的堆是操作系统中管理内存的一块…...
Redis(三)主从架构、Redis哨兵架构、Redis集群方案对比、Redis高可用集群搭建、Redis高可用集群之水平扩展
转自 极客时间 Redis主从架构 redis主从架构搭建,配置从节点步骤: 1、复制一份redis.conf文件2、将相关配置修改为如下值: port 6380 pidfile /var/run/redis_6380.pid # 把pid进程号写入pidfile配置的文件 logfile "6380.log" …...
pnpm + vite 从外网迁移到内网环境开发
离线安装pnpm 在有外网的机器上执行以下命令,下载pnpm的tgz压缩包至桌面,注意下载版本和当前使用版本保持一致 npm pack -g pnpm7.4.0 --pack-destination ~/Desktop将tgz压缩包拷贝至离线机器在离线机器中执行命令 npm -g i /home/user/offline/pnpm…...
寒假作业7
sql语句 创建表格 create table 表名 (字段名 数据类型,字段名 数据类型) create table if not exists 表名 (字段名 数据类型, 字段名 数据类型) 删除表格 drop table 表名; 插入记录 全字…...
【0257】关于pg内核shared cache invalidation messages (概念篇)
文章目录 1. inval messages2. 可配置参数(Configurable parameters)1. inval messages 所谓“共享缓存无效消息(shared cache invalidation messages)”,从概念上讲,共享缓存无效消息存储在一个无限数组中,其中maxMsgNum是存储提交消息的下一个数组下标, minMsgNum是…...
Nginx 缓存集成、清除、设置不缓存资源
文章目录 前言1. web缓存服务1.1 原理1.2 指令1.2.1 proxy_cache_path1.2.2 proxy_cache1.2.3 proxy_cache_key1.2.4 proxy_cache_valid1.2.5 proxy_cache_min_uses1.2.6 proxy_cache_methods 2. 缓存案例3. 缓存的清除3.1 删除对应的缓存目录3.2 使用第三方扩展模块ngx_cache_…...
C++面试宝典第27题:完全平方数之和
题目 给定正整数 n,找到若干个完全平方数(比如:1、4、9、16、...),使得它们的和等于n。你需要让组成和的完全平方数的个数最少。 示例1: 输入:n = 12 输出:3 解释:12 = 4 + 4 + 4。 示例2: 输入:n = 13 输出:2 解释:13 = 4 + 9。 解析 这道题主要考察应聘者对于…...
webrtc native api的几个要点
文章目录 基本流程状态回调类sdp的中媒体行pc对象 基本流程 webrtc native的接口,主要就是围绕着PeerConnection对象,一个PeerConnection对象它代表了一次音视频会话。 那么通过PeerConnection对象建立音视频通话,包括如下步骤: …...
MinMaxScaler, StandardScaler数据预处理中常用的两种缩放方法,用于将数据标准化或归一化到特定的范围或分布
MinMaxScaler 和 StandardScaler 是数据预处理中常用的两种缩放方法,用于将数据标准化或归一化到特定的范围或分布。这两种缩放方法的主要区别在于它们的目标和实现方式。 MinMaxScaler MinMaxScaler 会将数据缩放到一个指定的范围,通常是 [0, 1] 或 […...
【Web】vulhub Shiro-550反序列化漏洞复现学习笔记
目录 Shiro简介 复现流程 工具一把梭 半脚本半手动 原理分析 反序列化入口 常见的key 登录过程 验证过程 利用原理 Shiro简介 Apache Shiro 是一个强大且易于使用的 Java 安全框架,用于身份验证、授权、加密和会话管理等安全功能。Shiro 的设计目标是简单…...
【论文精读】多模态情感分析 —— VLP-MABSA
Vision-Language Pre-Training for Multimodal Aspect-Based Sentiment Analysis 本篇论文发表于ACL-2022 原文链接 https://arxiv.org/abs/2204.07955 源码 GitHub - NUSTM/VLP-MABSA 模态:图像文本 基于多模态方面的情感分析(MABSA)近年来越来越受到关注。然而&am…...
SQL SELECT TOP, LIMIT, ROWNUM 子句
在数据库中,LIMIT是一个用于限制结果集的关键字,它可以与SELECT语句一起使用。它有以下几种用法: LIMIT n:返回前n条记录。例如,LIMIT 10将返回结果集中的前10条记录。 LIMIT m, n:返回从第m1条记录开始的…...
空洞骑士模组管理终极指南:Scarab如何让复杂模组安装变得简单快速
空洞骑士模组管理终极指南:Scarab如何让复杂模组安装变得简单快速 【免费下载链接】Scarab An installer for Hollow Knight mods written in Avalonia. 项目地址: https://gitcode.com/gh_mirrors/sc/Scarab 对于《空洞骑士》玩家来说,模组&…...
Python内存泄漏分析实战指南(生产环境零停机排查全流程)
第一章:Python内存泄漏的本质与危害Python内存泄漏并非源于C语言中常见的“未释放malloc内存”,而是指对象被意外长期持有,导致垃圾回收器(GC)无法将其回收,从而持续占用堆内存。其本质是**引用关系的非预期…...
自然界生物群体智能启发的**元启发式优化算法**,广泛应用于组合优化、函数优化、路径规划、调度问题等领域
蚁群算法(Ant Colony Optimization, ACO)、粒子群算法(Particle Swarm Optimization, PSO)和鱼群算法(Artificial Fish Swarm Algorithm, AFSA)均属于受自然界生物群体智能启发的元启发式优化算法ÿ…...
AI辅助开发深度探索:在快马平台上对比评测类qoderwork官网的AI代码生成能力
最近在研究AI辅助开发时,发现一个很有意思的现象:同样是生成一个网页项目,不同AI模型给出的代码风格和实现思路差异很大。这让我萌生了一个想法——能不能搭建一个平台,专门用来对比评测不同AI模型的代码生成能力?就像…...
DIFY vs LangChain:零代码与全代码AI开发框架实战对比(附真实案例)
DIFY vs LangChain:零代码与全代码AI开发框架实战对比(附真实案例) 当企业或开发者希望将大语言模型(LLM)能力整合到业务中时,选择适合的开发框架至关重要。DIFY和LangChain代表了两种截然不同的技术路线&a…...
Python开源代码管理避坑实战:从Git高级操作到Docker环境配置
前言:为什么你总在开源门前徘徊? “这个项目看起来好复杂,我连代码都看不懂...” “提交PR会不会被大佬嘲笑?” “环境配置又报错了,算了,下次再说吧” 如果你有过这些想法,别担心ÿ…...
BiliRoamingX集成开发:Android 14兼容性优化与高级模块注入技术解析
BiliRoamingX集成开发:Android 14兼容性优化与高级模块注入技术解析 【免费下载链接】BiliRoamingX-integrations BiliRoamingX integrations powered by revanced. 项目地址: https://gitcode.com/gh_mirrors/bi/BiliRoamingX-integrations BiliRoamingX作为…...
SEO_2024年最新SEO趋势分析与实战策略解读
<h1 id"2024seo">2024年最新SEO趋势分析与实战策略解读</h1> <p>在数字营销的快速发展中,搜索引擎优化(SEO)作为提升网站流量的重要手段,一直备受关注。2024年,SEO领域再度发生了一些重要…...
OpenProject全球化协作本地化策略指南:打破语言壁垒的实战方案
OpenProject全球化协作本地化策略指南:打破语言壁垒的实战方案 【免费下载链接】openproject OpenProject is the leading open source project management software. 项目地址: https://gitcode.com/GitHub_Trending/op/openproject OpenProject作为领先的开…...
人血小板裂解液(hPL)与细胞治疗生产工具解析:Sexton产品应用综述【曼博生物官方代理Sexton】
摘要:人血小板裂解液(hPL)作为无动物源培养补充剂,正在逐步替代FBS应用于细胞与基因治疗(CGT)领域。本文结合相关产品体系,对hPL及细胞冻存与灌装系统进行系统梳理。 关键词:人血小板…...
