React 表单Form 中的 useForm

1、介绍

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

2、基本用法

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

bash 复制代码
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
    用于动态设置表单字段的值。
bash 复制代码
setValue('username', 'Updated User');
  • watch
    watch 用于观察表单字段的值,返回当前表单值或指定字段的值。watch 还可以用于实现动态表单交互。
bash 复制代码
const username = watch('username');
  • control
    control 是用来控制表单数据的对象,通常与 useController 和 useWatch 等其他 Hook 一起使用。

4、useForm 的常见配置选项

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

bash 复制代码
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 中指定验证规则,例如:

bash 复制代码
<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 来实现。

bash 复制代码
npm install yup @hookform/resolvers
bash 复制代码
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)的易集成,使其成为处理表单的理想选择。

相关推荐
【ql君】qlexcel14 分钟前
Notepad++ 复制宏、编辑宏的方法
开发语言·javascript·notepad++··宏编辑·宏复制
MiyueFE14 分钟前
14 个逻辑驱动的 UI 设计技巧,助您改善任何界面
前端·设计
啃火龙果的兔子18 分钟前
前端单元测试覆盖率工具有哪些,分别有什么优缺点
前端·单元测试
「、皓子~1 小时前
后台管理系统的诞生 - 利用AI 1天完成整个后台管理系统的微服务后端+前端
前端·人工智能·微服务·小程序·go·ai编程·ai写作
就改了1 小时前
Ajax——在OA系统提升性能的局部刷新
前端·javascript·ajax
凌冰_1 小时前
Ajax 入门
前端·javascript·ajax
京东零售技术1 小时前
京东小程序JS API仓颉改造实践
前端
奋飛1 小时前
TypeScript系列:第六篇 - 编写高质量的TS类型
javascript·typescript·ts·declare·.d.ts
老A技术联盟1 小时前
从小白入门,基于Cursor开发一个前端小程序之Cursor 编程实践与案例分析
前端·小程序
风铃喵游1 小时前
构建引擎: 打造小程序编译器
前端·小程序·架构