React-hook-form-mui(一):基本使用

前言

在项目开发中,我们选择了React+MUI作为技术栈。在使用MUI构建form表单时,我们发现并没有与antd类似的表单验证功能,于是我们选择了MUI推荐使用的react-hook-form-mui库去进行验证。但是发现网上关于这个库的使用方法和demo比较少且比较简单,并没有复杂的表单验证的demo。
因此本文及以下几篇文章,会从简到难讲解如何使用。希望通过这几篇文章的介绍,能够帮助你入门react-hook-form-mui

优势介绍

react-hook-form-mui可以帮助开发人员更轻松地构建表单,它结合了React Hook FormMaterial-UI组件库。它提供了一些预定义的表单组件,如TextFieldElementCheckboxElement、等,可以直接使用。此外,它还提供了一些自定义的表单组件,如PasswordElementDatePickerElement等,可以根据需要进行定制。
使用react-hook-form-mui,开发人员可以更快速地构建表单,并且可以轻松地进行表单验证和数据处理。

简单Demo

下面是一个以React MUI react-hook-form-mui简单用例

import React from 'react';
import { useForm } from 'react-hook-form';
import { Button } from '@mui/material';
import { FormContainer, TextFieldElement } from 'react-hook-form-mui';// 定义表单数据类型
export interface UserSettings{firstName: string;lastName: string;
}const MyForm = () => {// 使用 useForm 声明一个 formContextconst formContext = useForm<UserSettings>({// 初始化表单数据defaultValues: {firstName: '',lastName: ''}});// 表单提交时的回调函数const onSubmit = (data) => {console.log(data);};return (// 使用 FormContainer 包裹表单组件<FormContainerformContext={formContext}// 表单提交成功时的回调函数onSuccess={(data) => {onSubmit (data);}}>{/* 使用 TextFieldElement 渲染表单组件 */}<TextFieldElement name="firstName" label="First Name" /><TextFieldElement name="lastName" label="Last Name" /><Button type="submit">Submit</Button></FormContainer>);
};export default MyForm;

首先,我们通过useForm来声明一个formContext, 在formContext可以声明defaultValues来初始化form表单的值。

其次, 在formContainer中,声明onSuccess方法,当点击type=‘submit’,按钮时,会回调用其中的方法。onSuccess方法中的data参数,会返回和defaultValues中一样的数据类型。

总结

以上是关于React-hook-form-mu的最基础的用法。希望本文会对你有所帮助,如果有什么问题,可在下方留言沟通。

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

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

相关文章

二、类与对象(四)

22 内部类 22.1 内部类的概念 如果一个类定义在另一个类的内部&#xff0c;这个类就叫做内部类。内部类是一个独立的类&#xff0c;它不属于外部类&#xff0c;更不能通过外部类的对象去访问内部类的成员&#xff0c;外部类对内部类没有任何优越的访问权限&#xff0c;也就是…

LINUX基础培训之开机启动过程

前言、本章学习目标 掌握系统启动、引导过程 了解grub.conf的参数设置 熟悉系统运行级别 了解加载内核过程 一、LINUX启动引导过程 Linux系统的启动过程并不是大家想象中的那么复杂&#xff0c;其过程可以分为5个阶段&#xff1a; 1.开机自检 服务器主机开机以后&#xf…

5.SolidWorks的学习心法

学习计算机辅助设计软件&#xff08;CAD-Computer Aided Design&#xff09;的很重要的一点&#xff0c;就是要想清楚计算机辅助设计软件的本质和作用是什么。这一点非常重要&#xff0c;如果没有想清楚这一点&#xff0c;总会感觉得没有软件就做不了设计了&#xff0c;甚至是没…

LeetCode 2610. 转换二维数组【数组,哈希表】1373

本文属于「征服LeetCode」系列文章之一&#xff0c;这一系列正式开始于2021/08/12。由于LeetCode上部分题目有锁&#xff0c;本系列将至少持续到刷完所有无锁题之日为止&#xff1b;由于LeetCode还在不断地创建新题&#xff0c;本系列的终止日期可能是永远。在这一系列刷题文章…

Spring Beans的魔法门:解密多种配置方式【beans 四】

欢迎来到我的博客&#xff0c;代码的世界里&#xff0c;每一行都是一个故事 Spring Beans的魔法门&#xff1a;解密多种配置方式【beans 四】 前言XML配置方式1. 声明和配置Bean&#xff1a;2. 构造函数注入&#xff1a;3. 导入其他配置文件&#xff1a; java注解方式1. 使用Co…

算法训练营Day35

#Java #动态规划 开源学习资料 Feeling and experiences&#xff1a; 不同路径&#xff1a;力扣题目链接 一个机器人位于一个 m x n 网格的左上角 &#xff08;起始点在下图中标记为 “Start” &#xff09;。 机器人每次只能向下或者向右移动一步。机器人试图达到网格的右…

MyBatisPlus学习三:Service接口、代码生成器

学习教程 黑马程序员最新MybatisPlus全套视频教程&#xff0c;4小时快速精通mybatis-plus框架 Service接口 简介 在MyBatis-Plus框架中&#xff0c;Service接口的作用是为实体类提供一系列的通用CRUD&#xff08;增删改查&#xff09;操作方法。通常情况下&#xff0c;Servi…

PyTorch 入门学习数据操作之创建

简介 在深度学习中&#xff0c;我们通常会频繁地对数据进行操作&#xff1b;要操作一般就需要先创建。 官方介绍 The torch package contains data structures for multi-dimensional tensors and defines mathematical operations over these tensors. Additionally, it pr…

k8s-二进制部署

ETCD master节点 制作证书 1、下载证书工具 [rootmaster ~]# wget https://pkg.cfssl.org/R1.2/cfssl_linux-amd64 --no-check-certificate [rootmaster ~]# wget https://pkg.cfssl.org/R1.2/cfssljson_linux-amd64 --no-check-certificate [rootmaster ~]# wget https://…

SpringMVC通用后台管理系统源码

整体的SSM后台管理框架功能已经初具雏形&#xff0c;前端界面风格采用了结构简单、 性能优良、页面美观大的Layui页面展示框架 数据库支持了SQLserver,只需修改配置文件即可实现数据库之间的转换。 系统工具中加入了定时任务管理和cron生成器&#xff0c;轻松实现系统调度问…

【源码解析】Apache RocketMQ发送消息源码

send message源码解析 引入 send message方法作为我们经常使用的方法&#xff0c;平时我们很难去关注他底层到底做了什么。大部分人只知道通过send message方法可以将消息发送到broker&#xff0c;然后供消费者进行消费。其实不然&#xff0c;消息从客户端发送到broker&#x…

ssm基于vue.js的购物商场的设计与实现论文

摘 要 传统办法管理信息首先需要花费的时间比较多&#xff0c;其次数据出错率比较高&#xff0c;而且对错误的数据进行更改也比较困难&#xff0c;最后&#xff0c;检索数据费事费力。因此&#xff0c;在计算机上安装购物商场软件来发挥其高效地信息处理的作用&#xff0c;可以…

Spring Cloud Bus 相关问题及答案(2024)

1、什么是 Spring Cloud Bus&#xff1f; Spring Cloud Bus 是建立在 Spring Cloud 的基础之上&#xff0c;用于处理微服务架构中各服务实例间消息通信的框架。它与 Spring Cloud Config 结合使用时&#xff0c;可以提供一种动态刷新配置的能力&#xff0c;不需要重启服务实例…

阿里云服务器配置选择推荐方案

阿里云服务器配置怎么选择合适&#xff1f;CPU内存、公网带宽和ECS实例规格怎么选择合适&#xff1f;阿里云服务器网aliyunfuwuqi.com建议根据实际使用场景选择&#xff0c;例如企业网站后台、自建数据库、企业OA、ERP等办公系统、线下IDC直接映射、高性能计算和大游戏并发&…

cissp 第10章 : 物理安全要求

10.1 站点与设施设计的安全原则 物理控制是安全防护的第一条防线&#xff0c;而人员是最后一道防线。 10.1.1 安全设施计划 安全设施计划通过关键路径分析完成。 关键路径分析用于找出关键应用、流程、运营以及所有必要支撑元索间的关系。 技术融合指的是各种技术、解决方案…

性能优化-OpenMP基础教程(三)

本文主要介绍OpenMP并行编程的环境变量和实战、主要对比理解嵌套并行的效果。 &#x1f3ac;个人简介&#xff1a;一个全栈工程师的升级之路&#xff01; &#x1f4cb;个人专栏&#xff1a;高性能&#xff08;HPC&#xff09;开发基础教程 &#x1f380;CSDN主页 发狂的小花 &…

书生·浦语大模型全链路开源体系 学习笔记 第一课

背景 大模型是发展人工通用人工智能的一个重要途径&#xff0c;能够解决多种任务和多种模态&#xff0c;展示了一个更面向更高阶的智能的潜在途径。大模型的发展历程是从专用模型到通用模型的过程&#xff0c;从语音识别、图像识别、人脸识别等专用模型&#xff0c;到通用的大…

Java8内置四大核心函数式接口

先来看几个例子,主要练习策略模式: 用策略模式的做法 定义个接口 其实像这样的接口并不需要我们自己创建 java8推出的Lambda表达式主要就是为了简化开发,而Lambda表达式 的应用主要是针对与函数式接口,自然也推出了对应的一些接口 /*** Java8 内置的四大核心函数式接口** C…

找城市(100%用例)C卷 (JavaPythonC++Node.jsswift)

一张地图上有n个城市,城市和城市之间有且只有一条道路相连:要么直接相连,要么通过其它城市中转相连(可中转一次或多次)。城市与城市之间的道路 都不会成环 。 当切断通往某个城市 i 的所有道路后,地图上将分为多个连通的城市群,设该城市 i 的聚集度为 DP i (Degree of…

7-2 jmu-java-m02-使用二维数组存储多元线性方程组 --笔记篇

题目 题面 可以使用二维数组存储来存储线性方程组的系数与常数。比如&#xff0c;对于如下3元线性方程组 3xyz1 6x2yz-1 -2x2yz7 可以使用二位数组存储 2 1 1 1 6 2 1 -1 -2 2 1 7 编写一个程序可以存储n元线性方程组 输入格式: 整数n&#xff0c;代表n元 n行、每行n1列线性方…