当前位置：首页 > article >正文

React 表单Form 中的 useForm

article 2024/11/25 5:09:05

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.kler.cn/a/408153.html