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,一经查实,立即删除!

相关文章

亚马逊运营新手指南:10个基础概念解析

亚马逊作为全球最大的在线零售平台&#xff0c;为卖家们提供了巨大的商机。然而&#xff0c;跳入这片繁荣的电商海洋之前&#xff0c;了解一些基础概念是成功的关键。以下是每位亚马逊运营新手必须掌握的10个基础概念&#xff0c;帮助你建立起有效的跨境电商策略。 亚马逊10个基…

【证书管理】实验报告

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

【AWS】step-functions

这里写自定义目录标题 step-functionsState machine typeStandard workflowsExpress workflows 收费 step-functions https://us-east-2.console.aws.amazon.com/states/home?regionus-east-2#/homepage 功能&#xff1a; 配置工作流&#xff0c;工作流中的每个步骤称为一个…

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;而不必使用文本…

代码随想录算法训练营第39天(动态规划02● 62.不同路径 ● 63. 不同路径 II

动态规划part02 62.不同路径解题思路 63. 不同路径 II解题思路 今天开始逐渐有 dp的感觉了&#xff0c;题目不多&#xff0c;就两个 不同路径&#xff0c;可以好好研究一下 62.不同路径 本题大家掌握动态规划的方法就可以。 数论方法 有点非主流&#xff0c;很难想到。 题目链接…

开源模型应用落地-业务优化篇(五)

一、前言 经过线程池优化、请求排队和服务实例水平扩容等措施,整个AI服务链路的性能得到了显著地提升。但是,作为追求卓越的大家,绝不会止步于此。我们的目标是在降低成本和提高效率方面不断努力,追求最佳结果。如果你们在实施AI项目方面有经验,那一定会对GPU服务器的高昂…

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

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

ubuntu22.04@laptop OpenCV Get Started: 002_reading_writing_videos

ubuntu22.04laptop OpenCV Get Started: 002_reading_writing_videos 1. 源由2. Read/Display/Write应用Demo3 video_read_from_file3.1 C应用Demo3.2 Python应用Demo3.3 重点过程分析3.3.1 读取视频文件3.3.2 读取文件信息3.3.3 帧读取&显示 4 video_read_from_image_sequ…

客户端会话技术-Cookie

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

学习MySQL的MyISAM存储引擎

学习MySQL的MyISAM存储引擎 MySQL的MyISAM存储引擎是MySQL早期版本中默认的存储引擎&#xff0c;后来被InnoDB所取代。尽管InnoDB在许多方面提供了更高级的特性&#xff0c;如事务处理、行级锁定和外键支持&#xff0c;MyISAM仍然因其简单性、高性能以及对全文搜索的支持而被广…

Talking about your education in English

Raw Material Hi, Tim here with another 925English lesson! In today’s lesson we’re going to learn how to talk about your education. Your education is an important part of your background. And there are a lot of situations where you might talk about whe…

ubuntu上安装docker-compose踩坑记录

报错如下&#xff1a; $ docker-compose up /usr/local/lib/python3.8/dist-packages/requests/__init__.py:102: RequestsDependencyWarning: urllib3 (2.2.0) or chardet (3.0.4)/charset_normalizer (2.0.12) doesnt match a supported version!warnings.warn("urlli…

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…