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.rhkb.cn/news/254280.html

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

相关文章

计算机网络——04接入网和物理媒体

接入网和物理媒体 接入网络和物理媒体 怎样将端系统和边缘路由器连接&#xff1f; 住宅接入网络单位接入网络&#xff08;学校、公司&#xff09;无线接入网络 住宅接入&#xff1a;modem 将上网数据调制加载到音频信号上&#xff0c;在电话线上传输&#xff0c;在局端将其…

Ubuntu22.04 gnome-builder gnome C 应用程序习练笔记(一)

一、序言 gnome-builder构建器是gnome程序开发的集成环境&#xff0c;支持主力语言C, C, Vala, jscript, python等&#xff0c;界面以最新的 gtk 4.12 为主力&#xff0c;将其下版本的gtk直接压入了depreciated&#xff0c;但gtk4.12与普遍使用的gtk3有很大区别&#xff0c;原…

Java stream 流的基本使用

Java stream 的基本使用 package com.zhong.streamdemo.usestreamdemo;import jdk.jfr.DataAmount; import lombok.AllArgsConstructor; import lombok.Data; import lombok.NoArgsConstructor;import java.util.ArrayList; import java.util.Comparator; import java.util.Li…

elasticsearch重置密码操作

安装es的时候需要测试这个url&#xff1a;http://127.0.0.1:9200/ 出现弹窗让我输入账号和密码。我第一次登录&#xff0c;没有设置过账号和密码&#xff0c; 解决方法是&#xff1a;在es的bin目录下打开cmd窗口&#xff0c;敲命令&#xff1a;.\elasticsearch-reset-password…

Docker 搭建mysql 集群(二)

PXC方案 很明显 PXC方案在任何一个节点写入的数据都会同步到其他节点&#xff0c;数据双向同步的&#xff08;在任何节点上都可以同时读写&#xff09; 创建MySQL PXC集群 1 安装PXC镜像 docker pull percona/percona-xtradb-cluster:5.7.21 2 为PXC镜像改名 docker tag pe…

【开源】基于JAVA+Vue+SpringBoot的新能源电池回收系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 用户档案模块2.2 电池品类模块2.3 回收机构模块2.4 电池订单模块2.5 客服咨询模块 三、系统设计3.1 用例设计3.2 业务流程设计3.3 E-R 图设计 四、系统展示五、核心代码5.1 增改电池类型5.2 查询电池品类5.3 查询电池回…

代码随想录算法训练营第四十六天(动态规划篇)|01背包(滚动数组方法)

01背包&#xff08;滚动数组方法&#xff09; 学习资料&#xff1a;代码随想录 (programmercarl.com) 题目链接&#xff08;和上次一样&#xff09;&#xff1a;题目页面 (kamacoder.com) 思路 使用一维滚动数组代替二维数组。二维数组的解法记录在&#xff1a;代码随想录算…

【Linux】进程学习(一):基本认识

目录 1.基本概念2.初步理解3.描述进程-PCB3.1task_struct-PCB的一种3.2task_ struct内容分类 4.组织进程5.查看进程5.1通过ps指令查看5.2通过系统目录查看 6.通过系统调用获取进程的PID和PPID7.通过系统调用创建进程-fork初识 1.基本概念 课本概念&#xff1a;程序的一个执行实…

Linux---线程

线程概念 在一个程序里的一个执行路线就叫做线程&#xff08;thread&#xff09;。更准确的定义是&#xff1a;线程是“一个进程内部的控制序列” 一切进程至少都有一个执行线程 线程在进程内部运行&#xff0c;本质是在进程地址空间内运行 在Linux系统中&#xff0c;在CPU眼中…

嵌入式学习之Linux入门篇笔记——7,Linux常用命令第二部分

配套视频学习链接&#xff1a;http://【【北京迅为】嵌入式学习之Linux入门篇】 https://www.bilibili.com/video/BV1M7411m7wT/?p4&share_sourcecopy_web&vd_sourcea0ef2c4953d33a9260910aaea45eaec8 目录 1.mkdir 命令 2.rmdir 3.rm 命令 4.touch 命令 5.clear…

【网络安全】2024年暗网威胁分析及发展预测

暗网因其非法活动而臭名昭著&#xff0c;现已发展成为一个用于各种非法目的的地下网络市场。 它是网络犯罪分子的中心&#xff0c;为被盗数据交易、黑客服务和邪恶活动合作提供了机会。为了帮助企业组织更好地了解暗网发展形势&#xff0c;近日&#xff0c;卡巴斯基的安全研究…

Python商业数据挖掘实战——爬取网页并将其转为Markdown

前言 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家&#xff1a;https://www.captainbed.cn/z ChatGPT体验地址 文章目录 前言前言正则表达式进行转换送书活动 前言 在信息爆炸的时代&#xff0c;互联网…

OpenCV/C++:点线面相关计算(二)

接续&#xff0c;继续更新 OpenCV/C:点线面相关计算_线面相交的点 代码计算-CSDN博客文章浏览阅读1.6k次&#xff0c;点赞2次&#xff0c;收藏12次。OpenCV处理点线面的常用操作_线面相交的点 代码计算https://blog.csdn.net/cd_yourheart/article/details/125626239 目录 1、…

BlueLotus 下载安装使用

说明 蓝莲花平台BlueLotus&#xff0c;是清华大学曾经的蓝莲花战队搭建的平台&#xff0c;该平台用于接收xss返回数据。 正常执行反射型xss和存储型xss&#xff1a; 反射型在执行poc时&#xff0c;会直接在页面弹出执行注入的poc代码&#xff1b;存储型则是在将poc代码注入用…

500mA High Voltage Linear Charger with OVP/OCP

一、General Description YHM2810 is a highly integrated, single-cell Li-ion battery charger with system power path management for space-limited portable applications. The full charger function features Trickle-charge, constant current fast charge and const…

JavaScript综合练习3

JavaScript 综合练习 3 1. 案例演示 2. 代码实现 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta http-equiv"X-UA-Compatible" content"IEedge" /><meta name"viewpor…

物联网ARM开发-STM32之RTC浅谈

RTC 一.RTC简单介绍 RTC好比我们用来记录时间的一个钟表&#xff0c;他里面有年月日&#xff0c;还可以记录星期&#xff0c;小时&#xff0c;分钟等。是Real Time Clock的缩写&#xff0c;译为实时时钟&#xff0c;本质上是一个独立的定时器。 1. 1 与通用定时器的区别 可以…

基于 SpringBoot 和 Vue.js 的权限管理系统部署教程

大家后&#xff0c;我是 jonssonyan 在上一篇文章我介绍了我的新项目——基于 SpringBoot 和 Vue.js 的权限管理系统&#xff0c;本文主要介绍该系统的部署 部署教程 这里使用 Docker 进行部署&#xff0c;Docker 基于容器技术&#xff0c;它可以占用更少的资源&#xff0c;…

PyTorch 2.2 中文官方教程(七)

使用 torchtext 库进行文本分类 原文&#xff1a;pytorch.org/tutorials/beginner/text_sentiment_ngrams_tutorial.html 译者&#xff1a;飞龙 协议&#xff1a;CC BY-NC-SA 4.0 注意 点击这里下载完整示例代码 在本教程中&#xff0c;我们将展示如何使用 torchtext 库构建文…

【机器学习与自然语言处理】预训练 Pre-Training 各种经典方法的概念汇总

【机器学习与自然语言处理】预训练 Pre-Training 各种经典方法的概念汇总 前言请看此正文预训练 Pre-Training无监督学习 unsupervised learning概念&#xff1a;标签PCA 主成分分析&#xff08;Principal Component Analysis&#xff09;降维算法LSA 潜在语义分析&#xff08;…