React Hook Form 使用指南

React Hook Form 是一个强大而灵活的库，它简化了 React 应用程序中的表单管理。它提供了一组钩子和实用工具，使得处理表单状态、验证和提交变得轻松。本文将探索 React Hook Form 的各种特性和功能，从基本表单处理到高级技术，如模式验证和自定义钩子。 react-hook-form.com/

带默认验证的简单表单

我们从一个使用 React Hook Form 创建表单及其内置验证功能的简单示例开始：

jsx 复制代码

import React from 'react';
import { useForm } from 'react-hook-form';

const MyForm = () => {
  const { register, handleSubmit, formState: { errors } } = useForm();

  const onSubmit = data => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input
        name="name"
        required
        ref={register}
        placeholder="Name"
      />
      {errors.name && <span>This field is required</span>}
      <input
        name="email"
        required
        pattern="[^@]+@[^@]+"
        ref={register}
        placeholder="Email"
      />
      {errors.email && <span>Invalid email address</span>}
      <button type="submit">Submit</button>
    </form>
  );
};

在这个示例中，我们使用 useForm 钩子来获取 register、handleSubmit 和 formState 对象。register 函数用于注册表单字段并指定验证规则。这里，我们要求填写姓名和电子邮件字段，并且使用正则表达式验证电子邮件格式。

handleSubmit 函数用于包装 onSubmit 处理程序，确保在提交之前验证表单数据。如果验证失败，React Hook Form 将自动显示错误，这些错误可以使用 formState 中的 errors 对象在 UI 中显示。

使用 Yup 进行模式验证

虽然 React Hook Form 提供了内置的验证功能，但您可能希望使用更健壮且灵活的验证库，如 Yup，用于复杂的验证场景。Yup 是一个模式验证库，允许您使用声明性和可读性强的语法定义验证规则。

jsx 复制代码

import React from 'react';
import { useForm } from 'react-hook-form';
import * as Yup from 'yup';

const validationSchema = Yup.object().shape({
  name: Yup.string().required('Name is required'),
  email: Yup.string().email('Invalid email address').required('Email is required'),
  password: Yup.string().min(6, 'Password must be at least 6 characters').required('Password is required'),
});

const MyForm = () => {
  const { register, handleSubmit, formState: { errors } } = useForm({
    resolver: Yup,
  });

  const onSubmit = data => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      {/* 表单字段 */}
    </form>
  );
};

在这个示例中，我们使用 Yup 定义了一个验证模式，指定了姓名、电子邮件和密码字段的规则。然后，我们将这个模式传递给 useForm 钩子，使用 resolver 选项，将模式验证与 React Hook Form 集成。

当表单提交时，React Hook Form 将自动将表单数据与定义的模式进行验证，并将任何验证错误显示在 errors 对象中。

React Hook Form 控制器

React Hook Form 提供了一组控制器组件，允许您将表单字段与第三方 UI 库或自定义组件集成。这些控制器处理表单字段的注册、验证和值管理，使得在您的 React 应用程序中使用非原生表单控件变得简单。

jsx 复制代码

import React from 'react';
import { useForm, Controller } from 'react-hook-form';
import ReactDatePicker from 'react-datepicker';

const MyForm = () => {
  const { control, handleSubmit } = useForm();

  const onSubmit = data => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Controller
        name="birthDate"
        control={control}
        rules={{ required: true }}
        render={({ field }) => (
          <ReactDatePicker
            selected={field.value}
            onChange={date => field.onChange(date)}
            placeholderText="Select birth date"
          />
        )}
      />
      <button type="submit">Submit</button>
    </form>
  );
};

在这个示例中，我们使用 React Hook Form 的 Controller 组件来集成第三方日期选择器组件（ReactDatePicker）。Controller 组件处理 birthDate 字段的注册、验证和值管理，而 render 属性允许我们渲染日期选择器组件并传递必要的属性和事件处理程序。

useFormContext 钩子

jsx 复制代码

import React from 'react';
import { useFormContext } from 'react-hook-form';

const FormInput = ({ name, label, ...rest }) => {
  const { register } = useFormContext();
  return (
    <div>
      <label htmlFor={name}>{label}</label>
      <input id={name} ref={register} {...rest} />
    </div>
  );
};

const MyForm = () => {
  const { handleSubmit } = useForm();
  const onSubmit = data => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <FormInput name="name" label="Name" />
      <FormInput name="email" label="Email" type="email" />
      <button type="submit">Submit</button>
    </form>
  );
};

在这个示例中，我们创建了一个可重用的 FormInput 组件，该组件使用 useFormContext 来访问表单上下文中的 register 函数。这使我们能够注册输入字段与 React Hook Form，而无需从父组件向下传递 register 函数。

在 MyForm 组件中，我们使用 useForm 钩子来获取表单方法，包括 handleSubmit 函数。然后我们渲染 FormInput 组件，传递名称、标签和输入字段所需的任何其他属性。

当表单提交时，onSubmit 处理程序将被调用，并且会带有表单数据，包括来自 FormInput 组件的值。

通过使用 useFormContext，我们可以创建可重用的表单组件，这些组件可以轻松集成到我们应用程序的不同部分，而不必担心属性钻取或手动传递表单上下文。

useFieldArray 钩子

jsx 复制代码

import React from 'react';
import { useForm, useFieldArray } from 'react-hook-form';

const MyForm = () => {
  const { control, handleSubmit } = useForm();
  const { fields, append, remove } = useFieldArray({
    control,
    name: 'hobbies',
  });

  const onSubmit = data => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      {fields.map((field, index) => (
        <div key={field.id}>
          <input
            name={`hobbies.${index}.name`}
            ref={register}
            placeholder="Hobby"
          />
          <button type="button" onClick={() => remove(index)}>
            Remove
          </button>
        </div>
      ))}
      <button type="button" onClick={() => append({ name: '' })}>
        Add Hobby
      </button>
      <button type="submit">Submit</button>
    </form>
  );
};

在这个示例中，我们使用 useFieldArray 钩子来管理动态列表。fields 数组代表当前的动态列表，而 append 和 remove 函数允许我们从列表中添加或删除项目。

useWatch 钩子

React Hook Form 还提供了 useWatch 钩子，允许您订阅表单字段更改并触发副作用或基于这些更改的额外逻辑。这个钩子在需要基于表单字段值执行计算、更新 UI 组件或进行 API 调用的场景中非常有用。

jsx 复制代码

import React from 'react';
import { useForm, useWatch } from 'react-hook-form';

const MyForm = () => {
  const { control, handleSubmit } = useForm();
  const firstName = useWatch({ control, name: 'firstName' });
  const lastName = useWatch({ control, name: 'lastName' });

  const onSubmit = data => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input
        name="firstName"
        ref={register}
        placeholder="First Name"
      />
      <input
        name="lastName"
        ref={register}
        placeholder="Last Name"
      />
      <p>Full Name: {`${firstName} ${lastName}`}</p>
      <button type="submit">Submit</button>
    </form>
  );
};

在这个示例中，我们使用 useWatch 钩子来订阅 firstName 和 lastName 表单字段的更改。每当这些字段的值发生变化时，useWatch 钩子将使用最新值更新 firstName 和 lastName 变量。

然后我们在段落元素中通过组合 firstName 和 lastName 值来显示全名。这样，全名将随着用户在输入字段中输入自动更新，无需手动状态管理或事件处理。

当处理复杂的表单逻辑、条件渲染或基于表单字段更改触发副作用时，useWatch 钩子特别有用。

结论

React Hook Form 是一个非常强大且灵活的库，它简化了 React 应用程序中的表单管理。在本文中，我们介绍了各种特性和功能，包括使用默认验证的基本表单处理、使用 Yup 进行模式验证、使用控制器与第三方 UI 组件集成、使用 useFieldArray 和 useFormContext 钩子进行高级表单管理，以及使用 useWatch 钩子订阅表单字段更改。

使用 React Hook Form 可以显著提高在 React 应用程序中构建表单的开发者体验。它直观的 API、内置的验证功能以及与流行库的集成使其成为构建健壮且可维护的表单解决方案的极佳选择。

React Hook Form 的一个突出特点是其性能。通过利用 React 的内置钩子和优化表单状态管理，React Hook Form 最小化了不必要的重新渲染，并为用户提供了流畅且高效的体验。