高级用法

辅助功能 (A11y)

React Hook Form 支持原生表单验证，它允许你使用自己的规则验证输入。由于我们大多数人都必须使用自定义设计和布局来构建表单，因此我们有责任确保这些表单易于访问 (A11y)。

¥React Hook Form has support for native form validation, which lets you validate inputs with your own rules. Since most of us have to build forms with custom designs and layouts, it is our responsibility to make sure those are accessible (A11y).

以下代码示例按预期进行验证；然而，它可以在可访问性方面进行改进。

¥The following code example works as intended for validation; however, it can be improved for accessibility.

import React from "react"
import { useForm } from "react-hook-form"

export default function App() {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm()
  const onSubmit = (data) => console.log(data)

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label htmlFor="name">Name</label>
      <input
        id="name"
        {...register("name", { required: true, maxLength: 30 })}
      />
      {errors.name && errors.name.type === "required" && (
        <span>This is required</span>
      )}
      {errors.name && errors.name.type === "maxLength" && (
        <span>Max length exceeded</span>
      )}
      <input type="submit" />
    </form>
  )
}

以下代码示例是利用 ARIA 的改进版本。

¥The following code example is an improved version by leveraging ARIA.

import { useForm } from "react-hook-form"

export default function App() {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm()
  const onSubmit = (data) => console.log(data)

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label htmlFor="name">Name</label>

      {/* use aria-invalid to indicate field contain error */}
      <input
        id="name"
        aria-invalid={errors.name ? "true" : "false"}
        {...register("name", { required: true, maxLength: 30 })}
      />

      {/* use role="alert" to announce the error message */}
      {errors.name && errors.name.type === "required" && (
        <span role="alert">This is required</span>
      )}
      {errors.name && errors.name.type === "maxLength" && (
        <span role="alert">Max length exceeded</span>
      )}

      <input type="submit" />
    </form>
  )
}

经过此改进后，屏幕阅读器会显示：“名称，编辑，无效条目，此为必填项。”

¥After this improvement, the screen reader will say: “Name, edit, invalid entry, This is required.”

向导表单/漏斗

通过不同的页面和部分收集用户信息是很常见的。我们建议使用状态管理库来存储通过不同页面或部分的用户输入。在这个例子中，我们将使用小状态机作为我们的状态管理库（如果你更熟悉的话可以用 redux 替换它）。

¥It's pretty common to collect user information through different pages and sections. We recommend using a state management library to store user input through different pages or sections. In this example, we are going to use little state machine as our state management library (you can replace it with redux if you are more familiar with it).

步骤 1：设置你的路由和存储。

¥Step 1: Set up your routes and store.

高级用法

辅助功能 (A11y)

向导表单/漏斗

智能表单组件

错误信息

注册

可选链接

Lodash get

连接表单

表单提供者性能

受控与非受控组件混合

使用解析器的自定义钩子

使用虚拟化列表

测试表单

解决测试期间的行为警告

转换和解析

Lodash `get`