当前位置: 首页 > news >正文

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的最基础的用法。希望本文会对你有所帮助,如果有什么问题,可在下方留言沟通。

相关文章:

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

前言 在项目开发中&#xff0c;我们选择了ReactMUI作为技术栈。在使用MUI构建form表单时&#xff0c;我们发现并没有与antd类似的表单验证功能&#xff0c;于是我们选择了MUI推荐使用的react-hook-form-mui库去进行验证。但是发现网上关于这个库的使用方法和demo比较少且比较简…...

python总结-生成器与迭代器

生成器与迭代器 生成器生成器定义为什么要有生成器创建生成器的方式一(生成器表达式) 创建生成器的方式二(生成器函数)生成器函数的工作原理总结 迭代器概念可迭代对象和迭代器区别for循环的本质创建一个迭代器 动态添加属性和方法运行过程中给对象、类添加属性和方法types.Met…...

MySQL如何从数据中截取所需要的字符串

MySQL如何从数据中截取所需要的字符串 背景 有这样的一个场景,我想从我的表里面进行数据截取&#xff0c;我的数据内容大致如下&#xff1a; 张三-建外SOHO-2-16 POA 20210518.pdf 我想获取数据中的&#xff1a;20210518这一日期部分&#xff0c;需要如何实现&#xff1f; 解…...

动态加载和动态链接的区别

动态加载&#xff08;Dynamic Loading&#xff09;和动态链接&#xff08;Dynamic Linking&#xff09;是两个与程序运行时加载和使用代码相关的概念&#xff0c;它们有一些区别&#xff1a; 动态加载&#xff08;Dynamic Loading&#xff09;&#xff1a; 定义&#xff1a; 动…...

js数组循环,当前循环完成后执行下次循环

前言 上图中&#xff0c;点击播放icon&#xff0c;图中左边地球视角会按照视角列表依次执行。u3D提供了api,但是我们如何保证在循环中依次执行。即第一次执行完成后&#xff0c;再走第二次循环。很多人的第一思路就是promise。对&#xff0c;不错&#xff0c;出发的思路是正确的…...

决策树(Decision Trees)

决策树&#xff08;Decision Trees&#xff09;是一种基于树形结构进行决策的模型&#xff0c;广泛应用于分类和回归任务。它通过对数据集进行递归划分&#xff0c;构建一棵树&#xff0c;每个节点代表一个特征&#xff0c;每个分支代表一个决策规则&#xff0c;叶节点存储一个…...

湖南大学-计算机网路-2023期末考试【部分原题回忆】

前言 计算机网络第一门考&#xff0c;而且没考好&#xff0c;回忆起来的原题不多。 这门学科学的最认真&#xff0c;复习的最久&#xff0c;考的最差。 教材使用这本书&#xff1a; 简答题&#xff08;6*530分&#xff09; MTU和MSS分别是什么&#xff0c;联系是什么&#x…...

LCD—液晶显示

本节主要介绍以下内容 显示器简介 液晶控制原理 秉火3.2寸液晶屏简介 使用FSMC模拟8080时序 NOR FLASH时序结构体 FSMC初始化结构体 一、显示器简介 显示器属于计算机的I/O设备&#xff0c;即输入输出设备。它是一种将特定电子信息输出到屏幕上再反射到人眼的显示工具。…...

论正确初始化深度学习模型参数的重要性

遇到的问题&#xff1a;在一般的深度学习训练过程中&#xff0c;我们建立好模型以后&#xff0c;程序就有自动的初始化一些模型的参数&#xff0c;比如全连接层中每一个节点的权重等等&#xff0c;在之前的网络训练过程中&#xff0c;我总是事先设下随机种子以后&#xff0c;让…...

ALSA学习(5)——ASoC架构中的Machine

参考博客&#xff1a;https://blog.csdn.net/DroidPhone/article/details/7231605 &#xff08;以下内容皆为原博客转载&#xff09; 文章目录 一、注册Platform Device二、注册Platform Driver三、初始化入口soc_probe() 一、注册Platform Device ASoC把声卡注册为Platform …...

LeetCode 0447.回旋镖的数量:哈希表

【LetMeFly】447.回旋镖的数量&#xff1a;哈希表 力扣题目链接&#xff1a;https://leetcode.cn/problems/number-of-boomerangs/ 给定平面上 n 对 互不相同 的点 points &#xff0c;其中 points[i] [xi, yi] 。回旋镖 是由点 (i, j, k) 表示的元组 &#xff0c;其中 i 和…...

容器相关笔记

目录 1.容器 1.什么是容器 2.java中的容器 3.容器里存放的是引用数据类型&#xff08;存对象的地址&#xff0c;不是对象本身&#xff09;&#xff0c;不能存基本数据类型 4.容器存放的两种格式 5.容器类所在的包 6.容器的分类 1.Collection&#xff0c;存放单一的类型 1.List&…...

cissp 第10章 : 物理安全要求

10.1 站点与设施设计的安全原则 物理控制是安全防护的第一条防线&#xff0c;而人员是最后一道防线。 10.1.1 安全设施计划 安全设施计划描述了组织的安全要求的轮廓&#xff0c; 并且着重强调为了提供安全性所用的方法和机制。 这样的计划通过被称为关键路径分析的过程进行开…...

聊一聊 .NET高级调试 内核模式堆泄露

一&#xff1a;背景 1. 讲故事 前几天有位朋友找到我&#xff0c;说他的机器内存在不断的上涨&#xff0c;但在任务管理器中查不出是哪个进程吃的内存&#xff0c;特别奇怪&#xff0c;截图如下&#xff1a; 在我的分析旅程中都是用户态模式的内存泄漏&#xff0c;像上图中的…...

海外代理IP在游戏中有什么作用?

随着科技的飞速发展&#xff0c;手机和电脑等电子产品已成为互联网连接万物的重要工具&#xff0c;深度融入我们的日常生活&#xff0c;我们借助互联网完成工作、休闲和购物等任务&#xff0c;以求提升生活质量。 不仅如此&#xff0c;网络游戏也是人们心中最爱&#xff0c;它…...

高防ip适合防御网站和游戏类的攻击吗?

​  作为站长&#xff0c;要学会并承受得住网站外来攻击的压力&#xff0c;尤其是所属为 DDoS 攻击高发行业的网站类业务及游戏行业&#xff0c;是很容易被竞争对手或者一些伪黑客爱好者盯上的。 加上&#xff0c;有些站长并没有提前了解&#xff0c;就盲目进军了这两个行业&…...

HTML5和JS实现明媚月色效果

HTML5和JS实现明媚月色效果 先给出效果图&#xff1a; 源码如下&#xff1a; <!DOCTYPE html> <html> <head><title>明媚月光效果</title><style>body {margin: 0;overflow: hidden;background-color: #000; /* 添加一个深色背景以便看到…...

Django5+DRF序列化

概述 本教程将介绍如何创建一个简单的粘贴板代码高亮 Web API。在此过程中&#xff0c;它将介绍构成 REST 框架的各种组件&#xff0c;让你全面了解所有组件是如何组合在一起的。 本教程相当深入&#xff0c;因此在开始学习之前&#xff0c;你可能需要先吃一块饼干&#xff0…...

什么是编译程序和解释程序

一、编译程序 1、编译器接收源代码作为输入&#xff0c;它会一次性地将整个源代码程序转换成目标代码&#xff08;通常是机器语言或汇编语言&#xff09;&#xff0c;这个过程包括词法分析、语法分析、语义分析、优化以及最终的目标代码生成。2、编译后的目标代码是一个独立的…...

文档审阅批注的合并和对比

#创作灵感# 最近在改论文&#xff0c;Feedback返回的时候&#xff0c;把之前的批注都删了&#xff0c;这就增加了工作量&#xff0c;看起来不方便&#xff0c;所以就需要将删掉的批注全部复原。 那在原来的文档重新在修改一遍&#xff0c;工作量还是很大的&#xff0c;所以这里…...

Python|GIF 解析与构建(5):手搓截屏和帧率控制

目录 Python&#xff5c;GIF 解析与构建&#xff08;5&#xff09;&#xff1a;手搓截屏和帧率控制 一、引言 二、技术实现&#xff1a;手搓截屏模块 2.1 核心原理 2.2 代码解析&#xff1a;ScreenshotData类 2.2.1 截图函数&#xff1a;capture_screen 三、技术实现&…...

C++:std::is_convertible

C++标志库中提供is_convertible,可以测试一种类型是否可以转换为另一只类型: template <class From, class To> struct is_convertible; 使用举例: #include <iostream> #include <string>using namespace std;struct A { }; struct B : A { };int main…...

【HarmonyOS 5.0】DevEco Testing:鸿蒙应用质量保障的终极武器

——全方位测试解决方案与代码实战 一、工具定位与核心能力 DevEco Testing是HarmonyOS官方推出的​​一体化测试平台​​&#xff0c;覆盖应用全生命周期测试需求&#xff0c;主要提供五大核心能力&#xff1a; ​​测试类型​​​​检测目标​​​​关键指标​​功能体验基…...

django filter 统计数量 按属性去重

在Django中&#xff0c;如果你想要根据某个属性对查询集进行去重并统计数量&#xff0c;你可以使用values()方法配合annotate()方法来实现。这里有两种常见的方法来完成这个需求&#xff1a; 方法1&#xff1a;使用annotate()和Count 假设你有一个模型Item&#xff0c;并且你想…...

家政维修平台实战20:权限设计

目录 1 获取工人信息2 搭建工人入口3 权限判断总结 目前我们已经搭建好了基础的用户体系&#xff0c;主要是分成几个表&#xff0c;用户表我们是记录用户的基础信息&#xff0c;包括手机、昵称、头像。而工人和员工各有各的表。那么就有一个问题&#xff0c;不同的角色&#xf…...

【CSS position 属性】static、relative、fixed、absolute 、sticky详细介绍,多层嵌套定位示例

文章目录 ★ position 的五种类型及基本用法 ★ 一、position 属性概述 二、position 的五种类型详解(初学者版) 1. static(默认值) 2. relative(相对定位) 3. absolute(绝对定位) 4. fixed(固定定位) 5. sticky(粘性定位) 三、定位元素的层级关系(z-i…...

2021-03-15 iview一些问题

1.iview 在使用tree组件时&#xff0c;发现没有set类的方法&#xff0c;只有get&#xff0c;那么要改变tree值&#xff0c;只能遍历treeData&#xff0c;递归修改treeData的checked&#xff0c;发现无法更改&#xff0c;原因在于check模式下&#xff0c;子元素的勾选状态跟父节…...

深入解析C++中的extern关键字:跨文件共享变量与函数的终极指南

&#x1f680; C extern 关键字深度解析&#xff1a;跨文件编程的终极指南 &#x1f4c5; 更新时间&#xff1a;2025年6月5日 &#x1f3f7;️ 标签&#xff1a;C | extern关键字 | 多文件编程 | 链接与声明 | 现代C 文章目录 前言&#x1f525;一、extern 是什么&#xff1f;&…...

初探Service服务发现机制

1.Service简介 Service是将运行在一组Pod上的应用程序发布为网络服务的抽象方法。 主要功能&#xff1a;服务发现和负载均衡。 Service类型的包括ClusterIP类型、NodePort类型、LoadBalancer类型、ExternalName类型 2.Endpoints简介 Endpoints是一种Kubernetes资源&#xf…...

MySQL 索引底层结构揭秘:B-Tree 与 B+Tree 的区别与应用

文章目录 一、背景知识&#xff1a;什么是 B-Tree 和 BTree&#xff1f; B-Tree&#xff08;平衡多路查找树&#xff09; BTree&#xff08;B-Tree 的变种&#xff09; 二、结构对比&#xff1a;一张图看懂 三、为什么 MySQL InnoDB 选择 BTree&#xff1f; 1. 范围查询更快 2…...