React 表单组件实现

一、介绍

        本文将会基于react实现表单的功能,包括表单提交和跳转、表单验证、动态表单元素、动态内容加载。

二、使用教程

1.表单提交功能

export default class FormSubmit extends React.PureComponent{state = {name: ""}handleNameChange = evt => {this.setState({name: evt.target.value});}handleSubmit = evt => {evt.preventDefault(); // 阻止默认事件if (!this.state.name){this.setState({error: "Name is required"});return;}fetchUserList(this.state.name);        }const {userState, fetchUserList} = useFetchUserList();render(){return (<><form className = "comment-box" onSubmit = {this.handleSubmit}><div><label>Name:</label> <input value = {this.state.name} onchange = {this.handleNameChange}/></div>{userState.error && <span>userstate.error</span>}<div><button>Submit</button></div></form>{userState.data && <ul>userState.data.map((user)=> <li>user.name</li>)</ul>}</>)    }}

user-service.js

export const userFetchUserList = () => {const initialState = {data:[], isLoading:false, error:null};// reducerfunction reducer(state, action){switch (action.type){case FETCH_USER_LIST_BEGIN:return (data:[action.res.data], isLoading: true, error:null);case FETCH_USER_LIST_SUCCESS:return (...state, isLoading: false, error:null);case FETCH_USER_LIST_ERROR:return (...state, isLoading: false, error:res.data.error);}}const [state, dispatch] = useReducer(reducer, initialState);function fetchUserList(){dispatch({type: FETCH_USER_LIST_BEGIN});    const doRequest = axios.get("http://www.user.com/user/list");doRequest.then(res => {dispatch({type: FETCH_USER_LIST_BEGIN,data: res.data});},err => {dispatch({type: FETCH_USER_LIST_ERROR,data: {error:err}});});}return {state, fetchUserList};
}

2.动态表单元素 

a.定义meta

const formMeta = {colon: true,columns:1,elements: [{key: "userName",label: "User name",tooltip: "user name",widget: Input,required: true}]
}

b. 自定义表单组件

const CustomForm = ({meta}) => {function renderFormItem = (item) => {const { widget: WidgetComponent, key, label, tooltip, required } = item;return (<Form.Itemkey={key}label={<span>{label}{tooltip && <Tooltip title={tooltip}></Tooltip>}</span>}name={key}rules={[{ required, message: `Please input your ${label}!` }]}><WidgetComponent placeholder={`Please input your ${label}`} /></Form.Item>);        }const renderFormItems = () => {if (meta && meta.elements) {return meta.elements.map((item) => renderFormItem(item));}return null;};    return (<Formform={form}name="custom_form"onFinish={onFinish}initialValues={formData}labelCol={{ span: meta.columns }}wrapperCol={{ span: meta.columns }}>{renderFormItems()}{{children}}<Form.Item><Button type="primary" htmlType="submit">Submit</Button></Form.Item></Form>);
}

3.表单元素验证

    使用ant design框架

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

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

相关文章

扭矩系数和摩擦系数应该关注哪一个?——SunTorque智能扭矩系统

螺栓&#xff0c;作为设备的主要连接方式之一&#xff0c;应用在多个关键部位&#xff0c;是关系到整个设备的安全可靠运行的保障。例如&#xff0c;在风电机组中高强度螺栓就是为了保证较高的预紧力&#xff1b;但是&#xff0c;螺栓的质量、装配方法、拧紧工具等等都会影响到…

class034 链表高频题目和必备技巧【算法】

class034 链表高频题目和必备技巧【算法】 code1 160. 相交链表 // 返回两个无环链表相交的第一个节点 // 测试链接 : https://leetcode.cn/problems/intersection-of-two-linked-lists/ 容器法&#xff1a;HashSet记录list1&#xff0c;遍历list2&#xff0c;看是否包含在Ha…

从零开始学Python网络编程:轻松搭建服务器和客户端

Python网络编程的基础知识是成为一名全面的Python开发者的关键一步。网络编程使我们能够创建各种类型的网络应用程序&#xff0c;从简单的客户端/服务器应用到复杂的Web应用和网络爬虫。 在本文中&#xff0c;我将会学习到Python网络编程的基础概念&#xff0c;包括套接字、服…

Spring boot -- 学习HttpMessageConverter

文章目录 1. Json格式数据获取2. 为什么返回Json格式的数据2.1 注解SpringBootAppliaction2.1.1 SpringBootConfiguration2.1.2 ComponentScan2.1.3 EnableAutoConfiguration2.1.3.1 HttpMessageConvertersAutoConfiguration2.1.3.2 WebMvcAutoConfiguration 2.2 注解RestContr…

自动加微信软件的成果,与涉及到的技术与代码分享

**一、引言** 在当今的数字化时代&#xff0c;自动化的工具和软件越来越普及&#xff0c;帮助人们更高效地完成工作。RPA&#xff08;Robotic Process Automation&#xff09;软件就是其中一种强大的自动化工具&#xff0c;它可以模拟人类的操作&#xff0c;实现对各种系统的自…

石油化工园区:安全管理工作中的挑战与措施

石油化工园区&#xff1a;安全管理工作中的挑战与措施 石油化工园区是一种设备设施多且结构复杂的工业园区&#xff0c;涉及到易燃易爆或有毒介质&#xff0c;同时园区内有大量的工作人员和工作车辆等动态参与要素。由于园区的特殊性质&#xff0c;安全管理工作显然具备较高的挑…

跟着GPT学习shell脚本,理论与实践相结合的学习计划。(一)

学习计划&#xff1a;初学者到高手 第1-2周&#xff1a;基础入门 目标&#xff1a;了解Shell脚本的基本概念&#xff0c;掌握基础命令。内容&#xff1a; Shell脚本是什么&#xff0c;为什么使用Shell脚本。基本的Shell命令&#xff08;如ls, cd, mkdir, rm等&#xff09;。简…

农用烘干机市场分析:我国市场规模为190亿元

农用烘干机是运用在农业烘干领域的传统干燥设备之一&#xff0c;主要是为了农副产品直接使用或满足进一步加工的需要。农用烘干机具有操作弹性大、适应性强、处理能力大、设备运转可靠等优点&#xff0c;能大幅度提高农副产品烘干效率。现阶段&#xff0c;我国农用烘干机的市场…

AI助力智慧农业,基于YOLOv6最新版本模型开发构建不同参数量级农田场景下庄稼作物、杂草智能检测识别系统

智慧农业随着数字化信息化浪潮的演变有了新的定义&#xff0c;在前面的系列博文中&#xff0c;我们从一些现实世界里面的所见所想所感进行了很多对应的实践&#xff0c;感兴趣的话可以自行移步阅读即可&#xff1a; 《自建数据集&#xff0c;基于YOLOv7开发构建农田场景下杂草…

element中el-table表头通过header-row-style设置样式

文章目录 一、知识点二、设置全部表头2.1、方式一2.2、方式二 三、设置某个表头四、最后 一、知识点 有些时候需要给element-ui表头设置不同样式&#xff0c;比如居中、背景色、字体大小等等&#xff0c;这时就可以用到本文要说的属性header-row-style。官网说明如下所示&…

通用plantuml 时序图(Sequence Diagram)模板头

通用plantuml文件 startuml participant Admin order 0 #87CEFA // 参与者、顺序、颜色 participant Student order 1 #87CEFA participant Teacher order 2 #87CEFA participant TestPlayer order 3 #87CEFA participant Class order 4 #87CEFA participant Subject order …

关于支持向量机(SVM)的QSAR的结果的分析

图中的灰色部分代表了预测pIC50值与实测pIC50值之间的95%置信区间&#xff08;confidence interval&#xff09;。这个区间提供了一个预测误差的范围&#xff0c;意味着在统计上&#xff0c;我们有95%的把握认为真实值会落在这个区间内。具体来说&#xff0c;这个置信区间围绕着…

23、pytest通过skip跳过测试用例

官方实例 # content of test_skip.py import pytest import syspytest.mark.skip(reason"no way of currently testing this") def test_the_unknown():passdef valid_config():return Falsedef test_function():if not valid_config():pytest.skip("unsupport…

技术博客:Vue中各种混淆用法汇总

技术博客&#xff1a;Vue中各种混淆用法汇总 摘要 本文主要介绍了在Vue中使用的一些常见混淆用法&#xff0c;包括new Vue()、export default {}、createApp()、Vue.component、Vue3注册全局组件、Vue.use()等&#xff0c;以及如何使用混淆器对代码进行加固&#xff0c;保护应…

C/C++ 前缀和与差分

个人主页&#xff1a;仍有未知等待探索_C语言疑难,数据结构,算法-CSDN博客 专题分栏&#xff1a;算法_仍有未知等待探索的博客-CSDN博客 目录 一、前言 1、什么是前缀和 2、什么是差分 3、优势 1.朴素做法&#xff1a; 2.用差分数组 二、代码实现 1、给一个数组去求其差…

Hadoop学习笔记(HDP)-Part.19 安装Kafka

目录 Part.01 关于HDP Part.02 核心组件原理 Part.03 资源规划 Part.04 基础环境配置 Part.05 Yum源配置 Part.06 安装OracleJDK Part.07 安装MySQL Part.08 部署Ambari集群 Part.09 安装OpenLDAP Part.10 创建集群 Part.11 安装Kerberos Part.12 安装HDFS Part.13 安装Ranger …

LambdaQueryWrapper 和 QueryWrapper区别及案例

LambdaQueryWrapper 和 QueryWrapper 是 MyBatis-Plus&#xff08;简称 MP&#xff09;框架中用于构建查询条件的两种常用 Wrapper。它们的主要区别如下&#xff1a; 1. 写法和表达方式不同&#xff1a; QueryWrapper&#xff1a;使用传统的字符串形式构建查询条件&#xff0c…

分类信息发布小程序效果如何

信息发布系统连接信息供需双方&#xff0c;打造信息聚合平台&#xff0c;用户可获取和发布需求信息、参与互动交流&#xff0c;适用于同城、社区交流、客户互动、业务员/经纪人发布信息场景。 制作分类信息小程序后&#xff0c;商家后台设置信息项&#xff0c;发布者填写内容发…

腾讯云轻量应用服务器挂载对象存储详细说明

腾讯云轻量对象存储LighthouseCOS是腾讯云专为中小企业开发者打造的轻量级数据存储服务&#xff0c;适用于云端网站、小程序、课堂演示、云盘/图床等场景下的数据存储和处理任务。腾讯云百科txybk.com详细介绍腾讯云轻量对象存储使用、开通和收费价格说明&#xff1a; 轻量对象…

NetApp 高性能计算解决方案,处理、存储和分析海量数据

如果您不认为我们生活在一个激动人心的时代&#xff0c;不妨考虑一下高性能计算 (HPC) 是如何突破 AI 极限的。从基因组学到金融服务&#xff0c;NetApp HPC 解决方案一直在引领行业发展。 为什么选择 NetApp 的高性能计算解决方案&#xff1f; 快速、可扩展、可靠 对于如何满…