属性

名称	类型	描述
`onChange`	`ChangeHandler`	`onChange` 属性用于订阅输入的更改事件。
`onBlur`	`ChangeHandler`	`onBlur` 属性用于订阅输入的失焦事件。
`name`	`string`	正在注册的输入的名称。

输入`名称`	提交结果
`register("firstName")`	`{firstName: 'value'}`
`register("name.firstName")`	`{name: { firstName: 'value' }}`
`register("name.firstName.0")`	`{name: { firstName: [ 'value' ] }}`

返回值

提示：：在调用 register API 之后，输入发生了什么

const { onChange, onBlur, name, ref } = register('firstName'); 
// include type check against field path with the name you have supplied.
        
<input 
  onChange={onChange} // assign onChange event 
  onBlur={onBlur} // assign onBlur event
  name={name} // assign name prop
  ref={ref} // assign ref prop
/>
// same as above
<input {...register('firstName')} />

选项

通过选择 register 选项，下面的 API 表格将得到更新。

选择选项使用验证进行注册使用验证和错误消息进行注册

名称	描述	代码示例
`ref` `React.Ref`	React 元素 ref	<input {...register("test")} />
`required` `boolean`	一个布尔值，如果为真，表示输入必须在表单提交之前具有值。您可以分配一个字符串以在`errors` 对象中返回错误消息。注意：此配置与用于必填输入验证的 Web 受限 API 一致，用于 `object` 或 `array` 类型的输入使用 `validate` 函数代替。	<input {...register("test", { required: true })} />
`maxLength` `number`	此输入接受值的最大长度。	<input {...register("test", { maxLength: 2 })} />
`minLength` `number`	此输入接受值的最小长度。	<input {...register("test", { minLength: 1 })} />
`max` `number`	此输入接受的最大值。	<input type="number" {...register('test', { max: 3 })} />
`min` `number`	此输入接受的最小值。	<input type="number" {...register("test", { min: 3 })} />
`pattern` `RegExp`	输入的正则表达式模式。注意：带有 /g 标志的 RegExp 对象会跟踪匹配发生的最后一次索引。	<input {...register("test", { pattern: /[A-Za-z]{3}/ })} />
`validate` `Function \| Object`	您可以将回调函数作为参数传递给 validate，也可以传递回调函数的对象来验证所有函数。此函数将在其自身上执行，而不依赖于`required` 属性中包含的其他验证规则。注意：用于 `object` 或 `array` 输入数据，建议使用`validate` 函数进行验证，因为其他规则主要适用于`string`， `string[]`, `number` 和 `boolean`数据类型。	<input {...register("test", { validate: (value, formValues) => value === '1' })} /> // object of callback functions <input {...register("test1", { validate: { positive: v => parseInt(v) > 0, lessThanTen: v => parseInt(v) < 10, validateNumber: (_, values) => !!(values.number1 + values.number2), checkUrl: async () => await fetch(), } })} />
valueAsNumber `boolean`	通常返回一个数字。如果出现错误， `NaN` 将被返回。 `valueAs` 处理发生在验证之前。仅适用于并支持<input type="number" />，但我们仍然在没有修剪或任何其他数据操作的情况下将其转换为数字类型。不转换`defaultValue` 或 `defaultValues`.	<input type="number" {...register("test", { valueAsNumber: true, })} />
valueAsDate `boolean`	通常返回一个`Date` 对象。如果出现错误，`Invalid Date` 将被返回。 `valueAs` 处理发生在验证之前。仅适用于<input />. 不转换`defaultValue` 或 `defaultValues`.	<input type="date" {...register("test", { valueAsDate: true, })} />
setValueAs `<T>(value: any) => T`	通过运行函数返回输入值。 `valueAs` 处理发生在验证之前。另外， `setValueAs` 如果`valueAsNumber` 或 `valueAsDate` 都为 true `，则会被忽略。`. 仅适用于文本输入。不转换`defaultValue` 或 `defaultValues`.	<input type="number" {...register("test", { setValueAs: v => parseInt(v), })} />
`disabled` `boolean = false`	将`disabled` 设置为`true` 将导致输入值为`undefined`，并且输入控件将被禁用。 `Disabled` 属性也会省略内置验证规则。对于模式验证，您可以利用 `undefined` 从输入或上下文对象返回的值。	<input {...register("test", { disabled: true })} />
`onChange` `(e: SyntheticEvent) => void`	`onChange` 函数事件将在更改事件中被调用。	register('firstName', { onChange: (e) => console.log(e) })
`onBlur` `(e: SyntheticEvent) => void`	`onBlur` 函数事件将在失焦事件中被调用。	register('firstName', { onBlur: (e) => console.log(e) })
`value` `unknown`	为注册的输入设置值。此属性应该在`useEffect` 内使用或调用一次，每次重新运行都会更新或覆盖您提供的输入值。	register('firstName', { value: 'bill' })
shouldUnregister `boolean`	输入将在卸载后被取消注册，并且默认值也将被删除。注意：此属性应避免与 `useFieldArray` 一起使用，因为`unregister` 函数在输入卸载/重新安装和重新排序后被调用。	<input {...register("test", { shouldUnregister: true, })} />
deps `string \| string[]`	将触发对依赖输入的验证，它仅限于`register` API，而不是`trigger`。	<input {...register("test", { deps: ['inputA', 'inputB'], })} />

规则

name 是必需的并且唯一的（除了原生单选按钮和复选框）。输入名称支持点和括号语法，这使您可以轻松创建嵌套的表单字段。
name 既不能以数字开头，也不能使用数字作为键名。请避免使用特殊字符。
我们只使用点语法来保持 TypeScript 用法的Consistency，因此括号[] 不会用于数组表单值。
```
register('test.0.firstName'); // ✅
register('test[0]firstName'); // ❌
```
disabled 输入将导致 undefined 表单值。如果您想阻止用户更新输入，您可以使用readOnly 或禁用整个<fieldset />。这里有一个示例.
要生成字段数组，输入名称后面应加上点和数字。例如：test.0.data
在每次渲染时更改名称将导致注册新的输入。建议为每个注册的输入保持静态名称。
输入值和引用将不再根据卸载而删除。您可以调用 unregister 来删除该值和引用。

单个 register 选项不能通过 undefined 或 {} 删除。您可以改为更新单个属性。

register('test', { required: true });
register('test', {}); // ❌
register('test', undefined); // ❌
register('test', { required: false });  // ✅

有些关键字需要避免，以免与类型检查冲突。它们是ref, _f

示例

CodeSandbox ^JS

import * as React from "react";
import { useForm } from "react-hook-form";

export default function App() {
  const { register, handleSubmit } = useForm({
    defaultValues: {
      firstName: '',
      lastName: '',
      category: '',
      checkbox: [],
      radio: ''
    }
  });

  return (
    <form onSubmit={handleSubmit(console.log)}>
      <input {...register("firstName", { required: true })} placeholder="First name" />

      <input {...register("lastName", { minLength: 2 })} placeholder="Last name" />

      <select {...register("category")}>
        <option value="">Select...</option>
        <option value="A">Category A</option>
        <option value="B">Category B</option>
      </select>
      
      <input {...register("checkbox")} type="checkbox" value="A" />
      <input {...register("checkbox")} type="checkbox" value="B" />
      <input {...register("checkbox")} type="checkbox" value="C" />
      
      <input {...register("radio")} type="radio" value="A" />
      <input {...register("radio")} type="radio" value="B" />
      <input {...register("radio")} type="radio" value="C" />

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

视频

以下视频详细解释了register API。

提示

自定义注册

您也可以使用register 注册输入 useEffect 并将它们视为虚拟输入。对于受控组件，我们提供了一个自定义钩子 useController 和 Controller 组件来为您处理此过程。

如果您选择手动注册字段，则需要使用setValue 更新输入值。 setValue.

register('firstName', { required: true, min: 8 });

<TextInput onTextChange={(value) => setValue('lastChange', value))} />

如何处理 innerRef、inputRef？

当自定义输入组件没有正确公开 ref 时，您可以通过以下方式使其正常工作。

// not working, because ref is not assigned
<TextInput {...register('test')} />

const firstName = register('firstName', { required: true })
<TextInput
  name={firstName.name}
  onChange={firstName.onChange}
  onBlur={firstName.onBlur}
  inputRef={firstName.ref} // you can achieve the same for different ref name such as innerRef
/>

// correct way to forward input's ref
const Select = React.forwardRef(({ onChange, onBlur, name, label }, ref) => (
  <select name={name} ref={ref} onChange={onChange} onBlur={onBlur}>
    <option value="20">20</option>
    <option value="30">30</option>
  </select>
));

感谢您的支持

如果您发现 React Hook Form 对您的项目有用，请考虑加星并支持它。