React Academy · 课时

React Hook Form 入门

Q: 「React Hook Form 入门」这节课中我会学到什么？

安装 RHF，调用 useForm，注册输入项，并处理表单提交。 你通过在浏览器中直接运行的动手代码来练习 React Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

安装 RHF，调用 useForm，注册输入项，并处理表单提交。

React Hook Form 入门 是 CoddyKit 上的免费 React Academy 课时。这是第 1 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 React Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 React Academy 课程共包含 4 节课。

欢迎

在本课中，您将安装 React Hook Form，调用 useForm，注册输入字段，并在无需管理单个状态变量的情况下处理表单提交。

为什么使用 React Hook Form？

React 中的传统受控表单要求每个字段使用一个 useState，并为每个输入字段使用一个 onChange。React Hook Form（RHF）会使用非受控输入在内部完成这些管理，为您提供更简单的 API，并减少重新渲染次数。

安装

安装该包即可。基本使用不需要额外的对等依赖。

npm install react-hook-form

useForm 钩子

调用 useForm() 可获取 register 函数、handleSubmit 包装器和 formState。这是您处理任何表单所需的三个核心部分。

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

function LoginForm() {
  const { register, handleSubmit, formState: { errors } } = useForm();
  const onSubmit = data => console.log(data);
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      ...
    </form>
  );
}

注册输入字段

将 register('fieldName') 的结果展开到每个输入字段上。RHF 会在底层为输入字段附加 ref 和事件处理器——无需设置 value 或 onChange。

<input {...register('email')} type="email" />
<input {...register('password')} type="password" />
<button type="submit">Log in</button>

onSubmit 回调

handleSubmit 会验证所有字段，并且仅在表单有效时，使用一个类型明确的数据对象调用您的 onSubmit 回调。如果验证失败，它会改为填充 formState.errors。

const onSubmit = (data) => {
  // data = { email: 'a@b.com', password: 'secret' }
  loginUser(data);
};

默认值

将 `defaultValues` 传给 useForm，以预先填充表单字段。这对于加载已有数据的编辑表单很有用。

const { register } = useForm({
  defaultValues: { email: user.email, name: user.name },
});

formState 属性

formState 会提供一些实用的布尔值：`isSubmitting`（handleSubmit 运行期间为 true）、`isDirty`（任意字段发生更改时为 true）、`isValid`（没有错误时为 true），以及 `errors` 对象。

const { formState: { isSubmitting, isDirty, isValid, errors } } = useForm();

重置表单

调用 `reset()` 可清除所有字段并重置 formState。您也可以选择传入新的默认值。

const { reset } = useForm();

const onSubmit = async (data) => {
  await saveData(data);
  reset(); // clear after submit
};

性能优势

由于 RHF 使用非受控输入，表单不会像 React 的受控表单那样在每次击键时重新渲染。只有验证错误和提交状态会触发重新渲染，因此大型表单也能保持响应迅速。

快速检查

用户提交表单时，调用 handleSubmit(onSubmit) 会做什么？

回顾

安装 RHF，调用 useForm 获取 register 和 handleSubmit，将 register() 展开到输入字段上，并使用 handleSubmit 包装您的提交处理函数。为编辑表单设置 defaultValues，并在提交成功后调用 reset()。

接下来

下一课：**验证规则与错误消息**——您将应用内置验证规则，并向用户显示错误消息。

常见问题解答

「React Hook Form 入门」课时是免费的吗？

是的 — 「React Hook Form 入门」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 React Academy 课程的其余内容，请升级到 CoddyKit PRO。 React Academy 课程共包含 4 节课。

「React Hook Form 入门」这节课中我会学到什么？

安装 RHF，调用 useForm，注册输入项，并处理表单提交。你通过在浏览器中直接运行的动手代码来练习 React Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 React Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 React Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 1 节课，共 4 节。

「React Hook Form 入门」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 React Academy 课中编写并运行代码吗？

能。每节 React Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 React Academy