React 表单Form 中的 useForm

embedded/2024/11/26 19:24:53/

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.ppmy.cn/embedded/140703.html

相关文章

Centos 8, add repo

Centos repo前言 Centos 8更换在线阿里云创建一键更换repo 自动化脚本 华为Centos 源 , 阿里云Centos 源 华为epel 源 , 阿里云epel 源vim /centos8_repo.sh #!/bin/bash # -*- coding: utf-8 -*- # Author: make.han

《数据结构》学习系列——图(中)

系列文章目录 目录 图的遍历深度优先遍历递归算法堆栈算法 广度优先搜索 拓扑排序定义定理算法思想伪代码 关键路径基本概念关键活动有关量数学公式伪代码时间复杂性 图的遍历 从给定连通图的某一顶点出发&#xff0c;沿着一些边访问遍图中所有的顶点&#xff0c;且使每个顶点…

【unity小技巧】Unity 四叉树算法实现空间分割、物体存储并进行查询和碰撞检测

文章目录 前言四叉树的工作原理四叉树的优点四叉树的应用场景案例四叉树实现空间分割和物体存储并进行查询四叉树节点类使用示例 解释 四叉树实现碰撞检测四叉树的构建四叉树的实现步骤1. 创建四叉树的基本类2. 在 Unity 中使用四叉树进行碰撞检测 3. 解释4. 优势5. 注意事项 完…

Applied Intelligence投稿

一、关于手稿格式&#xff1a; 1、该期刊是一个二区的&#xff0c;模板使用Springer nature格式&#xff0c; 期刊投稿要求&#xff0c;详细期刊投稿指南&#xff0c;大部分按Soringernature模板即可&#xff0c;图片表格声明参考文献命名要求需注意。 2、参考文献&#xff…

【Python】分割秘籍!掌握split()方法,让你的字符串处理轻松无敌!

在Python开发中&#xff0c;字符串处理是最常见也是最基础的任务之一。而在众多字符串操作方法中&#xff0c;split()函数无疑是最为重要和常用的一个。无论你是Python新手&#xff0c;还是经验丰富的开发者&#xff0c;深入理解并熟练运用split()方法&#xff0c;都将大大提升…

44.扫雷第二部分、放置随机的雷,扫雷,炸死或成功 C语言

按照教程打完了。好几个bug都是自己打出来的。比如统计周围8个格子时&#xff0c;有一个各自加号填成了减号。我还以为平移了&#xff0c;一会显示是0一会显示是2。结果单纯的打错了。debug的时候断点放在scanf后面会顺畅一些。中间多放一些变量名方便监视。以及mine要多显示&a…

SpringBoot线程池的使用

SpringBoot线程池的使用 在现代Web应用开发中&#xff0c;特别是在使用Spring Boot框架时&#xff0c;合理使用线程池可以显著提高应用的性能和响应速度。线程池不仅能够减少线程创建和销毁的开销&#xff0c;还能有效地控制并发任务的数量&#xff0c;避免因线程过多而导致的…

19.QT程序简单的运行脚本

1.led_startup.sh #!/bin/sh ### BEGIN INIT INFO # Provides: led_startup # Required: no # Default: no # Description: Starts the LED program at boot ### END INIT INFO# 定义LED程序的路径 LED_PROGRAM_PATH/root/LED_and_TempHumi#…