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/217771.shtml

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

相关文章

【LinkedList】常用方法大全

1、添加元素&#xff1a; push、offerFirst都调用了addFirst函数&#xff0c;只不过push和addFirst一样没有返回值&#xff0c;offer会返回true&#xff1b;add背后通过linkLast(e)源码实现且有返回值 具体方法实现备注addpublic boolean add(E e) {linkLast(e); return true;}…

GEE:使用网格搜索法(Grid Search)求机器学习的最优参数或者参数组合

作者:CSDN @ _养乐多_ 本文记录了在 Google Earth Engine(GEE)平台中,计算机器学习分类算法最优参数的代码,其中包括单一参数的最优和不同参数组合的最优。使用的最优参数计算方法是网格搜索法(Grid Search),GEE 平台上并没有现成的网格搜索法 API,因此,本文在 GEE …

FPGA学习笔记-1 FPGA原理与开发流程

1 初识FPGA 文章目录 1 初识FPGA1.1 基本认知1.1.1 什么是FPGA&#xff1f;1.1.2 什么是HDL&#xff1f;什么是Verilog&#xff1f;1.1.3 硬件开发与软件开发1.1.4 FPGA与其他硬件的对比1.1.5 FPGA优势与局限性1.1.6 FPGA的应用1.1.7 FPGA的学习之路 1.2 FPGA开发流程1.2.1 一般…

安装Anaconda和pytorch

首先看下自己电脑是否有英伟达的显卡&#xff0c;如果有的话可以安装GPU版本&#xff0c;没有的话可以安装CPU版本。 CPU版本 1.安装Anaconda 首先去官网下载Anaconda。 点击download&#xff0c;下载的就是最新版本的。 下载完成后&#xff0c;直接运行下步就行 注意到路径…

python读取csv文件

在Python中&#xff0c;你可以使用pandas库来读取CSV文件。以下是一个基本的例子&#xff1a; import pandas as pd# 读取CSV文件data pd.read_csv(filename.csv)# 显示前几行数据print(data.head()) 这里&#xff0c;filename.csv应该被替换为你的CSV文件的实际路径和名称。…

SpringBoot 国际化-自定义 LocaleResolver

准备国际化文件 资源目录下创建 i18文件夹&#xff0c; i18 下面创建两个文件&#xff1a; 预配置信息 messages_en_US.preperties | successsuccess messages_zh_CN.properties | success操作成功在application.yml中指定国际化文件的位置 sp…

Web漏洞分析-文件解析及上传(上)

随着互联网的迅速发展&#xff0c;网络安全问题变得日益复杂&#xff0c;而文件解析及上传漏洞成为攻击者们频繁攻击的热点之一。本文将深入研究文件解析及上传漏洞&#xff0c;通过对文件上传、Web容器IIS、命令执行、Nginx文件解析漏洞以及公猫任意文件上传等方面的细致分析&…

「Verilog学习笔记」简易秒表

专栏前言 本专栏的内容主要是记录本人学习Verilog过程中的一些知识点&#xff0c;刷题网站用的是牛客网 timescale 1ns/1nsmodule count_module(input clk,input rst_n,output reg [5:0]second,output reg [5:0]minute);always (posedge clk or negedge rst_n) begin if (~rst…

控制笔记本电脑性能,增强性能/控制发热---Thinkpad x280

1、引言 手上有一台收来办公的Thinkpad x280,但安装的联想管家却没有性能调节选项&#xff0c;导致电脑性能释放很不顺手。由于有室外办公需求&#xff0c;也就有续航需求&#xff0c;也是让它减少发热&#xff1b;同时我想在室内的时候&#xff0c;完整发挥它的性能&#xff…

Spring框架中的8种设计模式

前言 Spring框架中的8种设计模式分别是&#xff1a;1、简单工厂。2、工厂方法。3、单例模式。4、适配器模 式。5、装饰器模式。6、代理模式。7、观察者模式。8、策略模式. 1、简单工厂 Spring中的BeanFactory就是简单工厂模式的体现&#xff0c;根据传入一个唯一的标识来获…

<Halcon> 局部放大显示

局部放大显示 当读取的图片为超大分辨率时&#xff0c;我们需要对局部位置或定位到的位置在显示窗口放大显示&#xff0c;主要算子为dev_set_part。 read_image (Image, printer_chip/printer_chip_01) gen_rectangle1 (ROI_0, 617.275, 1347.28, 828.349, 1449.5) dev_set_p…

springcloud微服务篇--2.微服务之间的调用

一、微服务案例需求1&#xff1a; 根据订单id查询订单的同时&#xff0c;把订单所属的用户信息一起返回 1、新建订单项目&#xff0c;用户服务。 2.RestTemplate实现微服务之间的访问。 在order-service的OrderApplication中注册RestTemplate 注入调用&#xff1a; Autowire…

Android 12.0 Launcher3定制化之修改添加的默认文件夹为9宫格样式

1. 概述 在12.0的系统产品rom定制化开发中,对于Launcher3的定制功能也是不少的,比如在Launcher3中添加默认文件夹,把默认的app添加的文件夹里面,其他的app 然后按顺序排序。在文件夹布局就是默认的9宫格布局,接下来分析下相关源码来实现相关功能的实现 2.Launcher3定制化…

tcn 时间序列回归实例

目录 torch-tcn库 示例代码 自定义实现tcn层 torch-tcn库 pip install torch-tcn 示例代码 import torch from torch import nn from tcn import TCNLayerbatch_size = 16 seq_length = 100 # 序列长度 n_features = 32 # 特征数量 n_outputs = 10 # 输出大小# 输入…

C#基础——字符串、字符串API

C#基础——字符串、字符串API 字符串是 System.String 类的实例。字符串表示文本数据&#xff0c;可以包含字母、数字、符号和空格等字符。 创建字符串 string str1 "Hello, World!"; // 使用双引号创建字符串 string str2 "This is a C# string.";字符…

Pyhon基于YOLOV实现的车辆品牌及型号检测项目源码+模型+项目文档

项目运行运行录屏&#xff1a; Pyhon基于YOLOV实现的车辆品牌及型号检测项目运行录屏 完整代码下载地址&#xff1a;Pyhon基于YOLOV实现的车辆品牌及型号检测项目 项目背景&#xff1a; 车辆检测及型号识别广泛应用于物业&#xff0c;交通等的管理场景中。通过在停车场出入口…

【PTA刷题+代码+详解】求二叉树度为1的结点个数(递归法)

文章目录 题目C代码详解 题目 在二叉树T中&#xff0c;其度为1的结点是指某结点只有左孩子或只有右孩子。利用递归方法求二叉树T的度为1的结点个数。 1&#xff09;如果TNULL&#xff0c;则是空树&#xff0c;度为1的结点个数为0&#xff0c;返回值为0&#xff1b; 2&#xff0…

上海亚商投顾:沪指收复3000点,房地产板块集体走强

上海亚商投顾前言&#xff1a;无惧大盘涨跌&#xff0c;解密龙虎榜资金&#xff0c;跟踪一线游资和机构资金动向&#xff0c;识别短期热点和强势个股。 一.市场情绪 沪指昨日窄幅震荡&#xff0c;创业板指走势较弱&#xff0c;科创50指数跌近1%。房地产板块集体走强&#xff0…

深度学习中的各类评价指标

深度学习中的各类评价指标 1 Dice Loss2 Precision&#xff08;精度&#xff09;3 Recall&#xff08;召回率&#xff09;4 F-Score5 mAP 1 Dice Loss Dice Loss&#xff0c;也叫Soft Dice Coefficient&#xff0c;是一种用于图像分割任务的损失函数。它基于目标分割图像与模型…

Apache Flink(十一):Flink集群部署-Standalone集群部署

🏡 个人主页:IT贫道_大数据OLAP体系技术栈,Apache Doris,Clickhouse 技术-CSDN博客 🚩 私聊博主:加入大数据技术讨论群聊,获取更多大数据资料。 🔔 博主个人B栈地址:豹哥教你大数据的个人空间-豹哥教你大数据个人主页-哔哩哔哩视频 目录 1. 节点划分