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>);
}

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

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

相关文章

【证书管理】实验报告

证书管理实验 【实验环境】 ISES客户端 【实验步骤】 查看证书 查看证书详细信息 选择任意证书状态&#xff0c;在下方“证书列表”中出现符合要求的所有证书。在“证书列表”中点击要查看证书&#xff0c;在右侧“证书详细信息”栏出现被选证书信息。 上述操作如图1.2.…

Elasticsearch:基本 CRUD 操作 - Python

在我之前的文章 “Elasticsearch&#xff1a;关于在 Python 中使用 Elasticsearch 你需要知道的一切 - 8.x”&#xff0c;我详细讲述了如何建立 Elasticsearch 的客户端连接。我们也详述了如何对数据的写入及一些基本操作。在今天的文章中&#xff0c;我们针对数据的 CRUD (cre…

C++后端开发之Sylar学习三:VSCode连接Ubuntu配置Gitee

C后端开发之Sylar学习三&#xff1a;VSCode连接Ubuntu配置Gitee 为了记录学习的过程&#xff0c;学习Sylar时写的代码统一提交到Gitee仓库中。 Ubuntu配置Gitee 安装git sudo apt-get install -y git配置用户名和邮箱 git config --global user.name 用户名 …

ArcGISPro中Python相关命令总结

主要总结conda方面的相关命令 列出当前活动环境中的包 conda list 列出所有 conda 环境 conda env list 克隆环境 克隆以默认的 arcgispro-py3 环境为模版的 my_env 新环境。 conda create --clone arcgispro-py3 --name my_env --pinned 激活环境 activate my_env p…

相机图像质量研究(3)图像质量测试介绍

系列文章目录 相机图像质量研究(1)Camera成像流程介绍 相机图像质量研究(2)ISP专用平台调优介绍 相机图像质量研究(3)图像质量测试介绍 相机图像质量研究(4)常见问题总结&#xff1a;光学结构对成像的影响--焦距 相机图像质量研究(5)常见问题总结&#xff1a;光学结构对成…

RabbitMQ-1.介绍与安装

介绍与安装 1.RabbitMQ1.0.技术选型1.1.安装1.2.收发消息1.2.1.交换机1.2.2.队列1.2.3.绑定关系1.2.4.发送消息 1.2.数据隔离1.2.1.用户管理1.2.3.virtual host 1.RabbitMQ 1.0.技术选型 消息Broker&#xff0c;目前常见的实现方案就是消息队列&#xff08;MessageQueue&…

Linux操作系统下安装消息中间件RabbitMQ_00000

下载 在官网下载Linux版RabbitMQ安装文件。 erlang-21.3-1.el7.x86_64.rpm rabbitmq-server-3.8.8-1.el7.noarch.rpm 安装 1、将文件上传至Linux系统中。 上传到/usr/local/software目录下&#xff08;如果没有software目录&#xff0c;则创建。&#xff09;。 2、安装文件&…

操作系统-【预备学习-2】(Linux 文件操作命令)

文章目录 相关知识文件查看命令cat 命令head 命令tail 命令nl 命令文件编辑基本命令 演示 相关知识 文件查看命令 我们要查看一些文本文件的内容时&#xff0c;要使用文本编辑器来查看。在Linxu下&#xff0c;可以使用一些命令预览文本文件中的内容&#xff0c;而不必使用文本…

空气质量预测 | Matlab实现基于SVR支持向量机回归的空气质量预测模型

文章目录 效果一览文章概述源码设计参考资料效果一览 文章概述 政府机构使用空气质量指数 (AQI) 向公众传达当前空气污染程度或预测空气污染程度。 随着 AQI 的上升,公共卫生风险也会增加。 不同国家有自己的空气质量指数,对应不同国家的空气质量标准。 基于支持向量机(Su…

客户端会话技术-Cookie

一、会话技术 1.1 概述 会话&#xff1a;一次会话中包含多次**请求和响应** 一次会话&#xff1a;浏览器第一次给服务器资源发送请求&#xff0c;此时会话建立&#xff0c;直到有一方断开为止 会话的功能&#xff1a;在一次会话的范围内的多次请求间&#xff0c;共享数据 …

107 C++ STL 容器分类,array,vector详解

STL 的组成部分是个重要的部分&#xff0c;先回忆一下 容器&#xff0c;迭代器&#xff0c;算法&#xff08;函数&#xff09;&#xff0c;分配器&#xff08;分配内存&#xff09;&#xff0c;适配器&#xff0c;仿函数 一 容器的分类. vector &#xff0c; list&#xff0c…

Narrative Visualization: Telling Stories with Data

作者&#xff1a;Edward Segel、Jeffrey Heer 发表&#xff1a;TVCG&#xff0c; 机构&#xff1a;UW Interactive Data Lab 【原斯坦福可视化组】 1.概述 静态可视化&#xff1a;在一大串的文本描述中&#xff0c;可视化作为提供证据和细节的图表出现新兴可视化&#xff1a…

元数据驱动的思想

元数据驱动的思想 元数据驱动的思想应该不会陌生&#xff0c;但元数据驱动的实践应该会非常陌生。 因为元数据驱动架构是为了解决高频个性化的复杂业务而诞生的&#xff0c;而这种业务场景只存在2B领域。 有关元数据驱动的架构思想&#xff0c;在这里暂先简单抛几个点。&#…

精雕细琢的文档体验:Spring Boot 与 Knife4j 完美交汇

欢迎来到我的博客&#xff0c;代码的世界里&#xff0c;每一行都是一个故事 精雕细琢的文档体验&#xff1a;Spring Boot 与 Knife4j 完美交汇 前言Knife4j 与 Swagger 的区别1. 特性与优劣势对比&#xff1a;Knife4j&#xff1a;Swagger&#xff1a; 2. 选择 Knife4j 的理由&a…

Nodejs基础6之HTTP模块的获取请求行和请求头、获取请求体、获取请求路径和查询字符串、http请求练习、设置HTTP响应报文、http响应练习

Nodejs基础 HTTP模块获取请求行和请求头获取请求体获取请求路径和查询字符串方式一方式二 http请求练习设置HTTP响应报文状态码响应状态描述响应头响应体 HTTP响应练习 HTTP模块 含义语法重点掌握请求方法request.method*请求版本request.httpVersion请求路径request.url*URL …

Mac利用brew安装mysql并设置初始密码

前言 之前一直是在windows上开发后段程序&#xff0c;所以只在windows上装mysql。(我记得linux只需要适应yum之类的命令即可) 另外, linux的移步 linux安装mysql (详细步骤,初次初始化,sql小例子,可视化操作客户端推荐) 好家伙&#xff0c;我佛了&#xff0c;写完当天网上发…

机器学习聚类算法

聚类算法是一种无监督学习方法&#xff0c;用于将数据集中的样本划分为多个簇&#xff0c;使得同一簇内的样本相似度较高&#xff0c;而不同簇之间的样本相似度较低。在数据分析中&#xff0c;聚类算法可以帮助我们发现数据的内在结构和规律&#xff0c;从而为进一步的数据分析…

深度学习缝模块怎么描述创新点?(附写作模板+涨点论文)

深度学习缝了别的模块怎么描述创新点、怎么讲故事写成一篇优质论文&#xff1f; 简单框架&#xff1a;描述自己这个领域&#xff0c;该领域出现了什么问题&#xff0c;你用了什么方法解决&#xff0c;你的方法有了多大的性能提升。 其中&#xff0c;重点讲清楚这两点&#xf…

QtAV学习:(一)Windows下编译QtAV

QtAV 主页&#xff1a; QtAV by wang-bin 作者的编译构建说明文档&#xff1a; Build QtAV wang-bin/QtAV Wiki GitHub 我的编译环境&#xff1a; 编译环境&#xff1a;win10/msvc2015/Qt5.6.3 第一步&#xff1a;GitHub拉取代码,执行子模块初始化 地址&#xff1a; …

2024-01-07-AI 大模型全栈工程师 - 做自己的产品经理

摘要 2024-01-07 周日 杭州 阴 本节内容: a. 如何做好独立开发设计&#xff0c;实现财富自由&#xff1b; 课程内容 1. 独立开发者 英文 indie hacker&#xff0c;是指独立开发软件产品的人&#xff1b;一人承担一个项目产品的所有工作&#xff1b; 2. 创业机会 云计算设…