React 表单Form 中的 useForm

1、介绍

useForm 是 React Hook Form 中的核心 Hook,用于管理表单的状态和行为。它提供了处理表单验证、数据收集、状态管理等功能的简便方法。useForm 本质上是用于创建和配置表单,并允许你在组件中与表单字段交互。

2、基本用法

useForm 是一个函数,它返回表单的核心控制对象。你可以通过 useForm 获取多个方法和状态来处理表单。

import { useForm } from 'react-hook-form';function MyForm() {// useForm hook 返回的方法和状态const { register, handleSubmit, formState: { errors }, reset, setValue } = useForm();// 提交表单时的处理逻辑const onSubmit = (data) => {console.log(data);};return (<form onSubmit={handleSubmit(onSubmit)}><input{...register('username', { required: 'Username is required' })}  // 注册字段/>{errors.username && <p>{errors.username.message}</p>}  // 显示错误信息<button type="submit">Submit</button></form>);
}

3、useForm 的返回值

useForm 返回一个包含许多方法和属性的对象,用于处理表单状态和行为。以下是一些常用的返回值:

  • register
    用于将输入框或其他表单控件注册到 React Hook Form 中,它可以接受验证规则。
  • handleSubmit
    用于处理表单提交,它是一个函数,接受一个回调函数,当表单数据合法时会执行这个回调。
  • formState
    formState 包含表单状态的信息,通常包括以下内容:
    errors:包含字段验证错误信息。
    isSubmitting:指示表单是否正在提交。
    isValid:指示表单数据是否有效。
    isDirty:指示表单数据是否被修改。
  • reset
    用于重置表单字段的值,并且可以设置表单的默认值。
  • setValue
    用于动态设置表单字段的值。
setValue('username', 'Updated User');
  • watch
    watch 用于观察表单字段的值,返回当前表单值或指定字段的值。watch 还可以用于实现动态表单交互。
const username = watch('username');
  • control
    control 是用来控制表单数据的对象,通常与 useController 和 useWatch 等其他 Hook 一起使用。

4、useForm 的常见配置选项

useForm 也支持一些配置选项,允许你定制表单行为。

const { register, handleSubmit, formState: { errors } } = useForm({mode: 'onSubmit',        // 表单验证触发时机: 'onChange', 'onBlur', 'onSubmit'reValidateMode: 'onChange', // 设置重新验证的时机defaultValues: {         // 设置表单默认值username: '',password: '',},resolver: yourCustomResolver,  // 自定义验证
});

5、常见配置选项:

mode:定义验证的触发方式,常见选项:
‘onChange’:在每次字段变化时触发验证。
‘onBlur’:在字段失去焦点时触发验证。
‘onSubmit’:在提交表单时触发验证(默认)。
defaultValues:设置表单字段的默认值。
resolver:自定义验证器,常用于与第三方验证库(如 Yup、Joi)结合使用。

6、表单验证:

React Hook Form 支持灵活的表单验证方式。你可以在 register 中指定验证规则,例如:

<input{...register('username', {required: 'Username is required',minLength: { value: 5, message: 'Username must be at least 5 characters' }})}
/>

你可以定义多种验证规则:

required:字段是否为必填。
minLength、maxLength:字段长度的最小值和最大值。
pattern:正则表达式验证。
validate:自定义验证函数。

7、和 Yup 配合使用进行验证:

React Hook Form 可以和 Yup 配合使用来进行表单验证。通过 yupResolver 来实现。

npm install yup @hookform/resolvers
import { useForm } from 'react-hook-form';
import * as Yup from 'yup';
import { yupResolver } from '@hookform/resolvers/yup';// 定义 Yup 验证规则
const schema = Yup.object().shape({username: Yup.string().required('Username is required').min(5, 'Username must be at least 5 characters'),password: Yup.string().required('Password is required').min(6, 'Password must be at least 6 characters'),
});function MyForm() {const { register, handleSubmit, formState: { errors } } = useForm({resolver: yupResolver(schema),  // 使用 yupResolver 进行验证});const onSubmit = (data) => {console.log(data);};return (<form onSubmit={handleSubmit(onSubmit)}><input {...register('username')} />{errors.username && <p>{errors.username.message}</p>}<input {...register('password')} type="password" />{errors.password && <p>{errors.password.message}</p>}<button type="submit">Submit</button></form>);
}

8、总结:

useForm 是 React Hook Form 的核心 hook,用于创建和管理表单。
通过 useForm,你可以注册表单字段、处理表单提交、进行验证、获取表单状态等。
useForm 提供了灵活的配置选项和与第三方验证库的集成支持,方便你构建复杂的表单逻辑。
React Hook Form 的优势在于其高性能、简洁的 API 和与其他库(如 Yup)的易集成,使其成为处理表单的理想选择。

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

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

相关文章

时序论文22|ICML24港科大:面向多变量不规则的时间序列预测方法

论文标题&#xff1a;Irregular Multivariate Time Series Forecasting: A Transformable Patching Graph Neural Networks Approach 论文链接&#xff1a;https://openreview.net/pdf?idUZlMXUGI6e 前言 这篇文章在“定位研究问题”方面很值得学习。其实前段时间对时序研究…

Linux离线安装Docker命令,简单镜像操作

解压安装包 首先&#xff0c;使用 tar 命令解压 docker-27.3.1.tgz 安装包&#xff1a; tar -zxvf docker-27.3.1.tgz 将二进制文件移动到可执行路径上的目录 接着&#xff0c;将解压出来的 Docker 二进制文件复制到系统的可执行路径&#xff08;通常是 /usr/bin/&#xff09…

Sigrity SPEED2000 TDR TDT Simulation模式如何进行时域阻抗仿真分析操作指导-差分信号

Sigrity SPEED2000 TDR TDT Simulation模式如何进行时域阻抗仿真分析操作指导-差分信号 Sigrity SPEED2000 TDR TDT Simulation模式如何进行时域阻抗仿真分析操作指导-单端信号详细介绍了单端信号如何进行TDR仿真分析,下面介绍如何对差分信号进行TDR分析,还是以下图为例进行分…

springboot基于微信小程序的食堂预约点餐系统

摘 要 基于微信小程序的食堂预约点餐系统是一种服务于学校和企事业单位食堂的智能化解决方案&#xff0c;旨在提高食堂就餐的效率、缓解排队压力&#xff0c;并优化用户的就餐体验。系统作为一种现代化的解决方案&#xff0c;为食堂管理和用户就餐提供了便捷高效的途径。它不仅…

Java线程池详解

线程池是用来管理和复用线程的一种技术&#xff0c;它避免了频繁的创建和销毁线程的开销&#xff0c;提高了应用程序的性能。在 Java 中&#xff0c;ExecutorService 是一个非常常用的接口&#xff0c;它提供了线程池的基本功能。 1. 线程池的优势 线程复用&#xff1a;线程池…

软件测试—— Selenium 常用函数(二)

前一篇文章&#xff1a;软件测试—— Selenium 常用函数&#xff08;一&#xff09;-CSDN博客 目录 前言 一、浏览器 1.常见操作 &#xff08;1&#xff09;打开网站 &#xff08;2&#xff09;前进、后退、刷新 2.参数设置 &#xff08;1&#xff09;设置无头模式 &am…

webgl threejs 云渲染(服务器渲染、后端渲染)解决方案

云渲染和流式传输共享三维模型场景 1、本地无需高端GPU设备即可提供三维项目渲染 云渲染和云流化媒体都可以让3D模型共享变得简单便捷。配备强大GPU的远程服务器早就可以处理密集的处理工作&#xff0c;而专有应用程序&#xff0c;用户也可以从任何个人设备查看全保真模型并与…

springboot基于Spring Boot的古城景区管理系统的设计与实现docx

摘 要 古城景区管理系统是一个集景区导游功能于一体的综合管理平台&#xff0c;旨在提升游客的参观体验和提高管理效率。系统通过提供详尽的热门景点、客房类型、酒店信息、美食类型、特色美食、文创产品及导游服务&#xff0c;使游客能够深入了解古城的历史与文化。该系统集成…

彻底理解如何保证Redis和数据库数据一致性问题

一.背景 系统中缓存最常用的策略是&#xff1a;服务端需要同时维护 DB 和 Cache 并且是以 DB 的结果为准&#xff0c;那么就可能出现 DB 和 Cache 数据不一致的问题。 二.读数据 逻辑如下&#xff1a; 当客户端发起查询数据的请求&#xff0c;首先回去Redis中查看没有没该数据&…

openwebui使用

文章目录 1、feature2、安装使用2.1 安装过程2.2 安装好后 1、feature 可以加载多个大模型 同时回复 模型问答: 使用vLLM框架部署模型&#xff0c;再使用Open WebUI直接进行模型问答 多模型支持: 多模型回复比对&#xff08;Qwen2-72B-Instruct, llama3-70b-8192, mixtral-8x7…

.net 8使用hangfire实现库存同步任务

C# 使用HangFire 第一章:.net Framework 4.6 WebAPI 使用Hangfire 第二章:net 8使用hangfire实现库存同步任务 文章目录 C# 使用HangFire前言项目源码一、项目架构二、项目服务介绍HangFire服务结构解析HangfireCollectionExtensions 类ModelHangfireSettingsHttpAuthInfoUs…

【已解决】“EndNote could not connect to the online sync service”问题的解决

本人不止一次在使用EndNote软件时遇到过“EndNote could not connect to the online sync service”这个问题。 过去遇到这个问题都是用这个方法来解决&#xff1a; 这个方法虽然能解决&#xff0c;但工程量太大&#xff0c;每次做完得歇半天身体才能缓过来。 后来再遇到该问…

私有化部署视频平台EasyCVR宇视设备视频平台如何构建视频联网平台及升级视频转码业务?

在当今数字化、网络化的时代背景下&#xff0c;视频监控技术已广泛应用于各行各业&#xff0c;成为保障安全、提升效率的重要工具。然而&#xff0c;面对复杂多变的监控需求和跨区域、网络化的管理挑战&#xff0c;传统的视频监控解决方案往往显得力不从心。 EasyCVR视频融合云…

Ubuntu从入门到精通(二)远程和镜像源配置齐全

Ubuntu从入门到精通(二) 1 常见操作配置 1.1 英文语言配置 1.1.1 打开设置 1.1.2 设置语言为英文 1.1.3 重启生效 1.1.4 再次进入,选择更新名字 1.1.5 再次进入,发现已经变成了英文 1.2 输入法配置 1.3 rustdesk安装 1.3.1 Windows系统配置 登陆:https://github.com…

【Node.js】全面解析 Node.js 安全最佳实践:保护您的应用

Node.js 是一种强大的 JavaScript 运行时&#xff0c;广泛用于构建现代 Web 应用和 API。然而&#xff0c;由于其开放性和异步特性&#xff0c;Node.js 应用容易受到多种安全威胁的攻击&#xff0c;比如 SQL 注入、跨站脚本 (XSS) 和拒绝服务攻击 (DoS)。在本文中&#xff0c;我…

Spring Cloud Alibaba、Spring Cloud 与 Spring Boot各版本的对应关系

参考spring-cloud-alibaba github wiki说明&#xff1a;版本说明 下面截取说明&#xff1a; 2022.x 分支 2021.x 分支 2.2.x 分支 组件版本关系

ChatGPT Search VS Kimi探索版:AI搜索哪家强?!

大家好&#xff0c;我是木易&#xff0c;一个持续关注AI领域的互联网技术产品经理&#xff0c;国内Top2本科&#xff0c;美国Top10 CS研究生&#xff0c;MBA。我坚信AI是普通人变强的“外挂”&#xff0c;专注于分享AI全维度知识&#xff0c;包括但不限于AI科普&#xff0c;AI工…

Linux常用命令,持续更新钟

在Linux系统中&#xff0c;你可以使用多种命令来拷贝和移动文件及目录。以下是常用的几个命令及其用法&#xff1a; 一、拷贝文件或目录 cp 命令 cp 命令用于拷贝文件或目录。 拷贝文件&#xff1a; cp source_file destination_file 例如&#xff1a; cp file1.txt /hom…

基于SpringBoot的校园二手商品在线交易系统+含项目运行说明文档

一、项目技术栈 二、项目功能概述 管理员可以完成的功能包括管理员登录、管理员首页展示、系统设置、物品管理、学生管理、评论管理、举报管理、新闻公告、网站设置等&#xff0c;前台的客户可以进行查看所有商品分类、搜索商品、登录或注册、发布商品、求购商品等。 三、部分…

MATLAB实现GARCH(广义自回归条件异方差)模型计算VaR(Value at Risk)

MATLAB实现GARCH(广义自回归条件异方差)模型计算VaR(Value at Risk) 1.计算模型介绍 使用GARCH&#xff08;广义自回归条件异方差&#xff09;模型计算VaR&#xff08;风险价值&#xff09;时&#xff0c;方差法是一个常用的方法。GARCH模型能够捕捉到金融时间序列数据中的波…