React Hook 从入门到精通，你掌握了吗？

你可以把它理解成一个专门帮你管表单的智能表格管理员。

它会帮你做这些事：

1. 记住每个输入框的值
2. 检查使用者有没有填对
3. 收集所有数据
4. 在你点提交时统一交给你
5. 告诉你哪里出错了

react-hook-form 本质上就是：

一个专门管理 React 表单的库。

为什么需要它？

"使用原生 React 做表单太繁琐！" - 开发者痛点 "每个输入框都要定义状态，校验逻辑散落各处..." - 开发者困惑 "我只想快速搭建一个完整的表单程序！" - 开发者需求 "复杂校验规则让我头疼不已..." - 开发者挑战 简单的说就是为了更简单的去管理表单，否则填一个内容我们就需要使用useState来定义一个状态。接下来错误的话也要自己去定义字段，还有就是校验也需要一个个写。比如下面的代码，只是定义了一点状态。还没有错误的，也没有校验，但是代码已经很多了。按理说，

jsx import { useState } from "react";function App { const = useState;老实说，const = useState;const = useState;const handleSubmit = => { e.preventDefault;console.log({ username。email,password,});}，return (

二.如何使用？

再看a.简单使用，

"终于找到方法了！怎么开始使用呢，" - 初学者疑问 "先安装包吧！具体怎么操作，" - 初学者迷茫 "希望能有最简单的示例让我理解基础用法..." - 初学者期待

先安装包这方面，jsx npm install react-hook-form

直接看最简单的代码： jsx import { useForm } from "react-hook-form";// 从 react-hook-form 里引入 useForm 这个工具

function App { const { register,handleSubmit } = useForm;//创建表单管理器，并拿出 register 和 handleSubmit两个常用功能

const onSubmit = => { //定义一个函数。 表单提交成功后会执行它 console.log;// 把表单收集到的数据打印到控制台 };

return (

);} export default App;//导出组件

为什么需要它?

• 这是整个表单“总入口”。再看您可以理解为，“您想使用_react hook form_。获得“形式经理人”，"
• 就像购买手机一样。“您 选择品牌型号”，接下来才能获得具体功能。"
• 这是“形式经理人”的创建方法。"
• “我必须拥有这个工具才能继续工作！老实说，”——开发者意识。"

）注册是干什么?

• 将输入框“登记”到形式程序中。按理说，说到您可以理解为，“告诉这个工具：'这个输入框归您管' ”。"
• 就像在超市结账一样，“告诉我这件商品是哪种类型”。"

"——初学者疑问
• 这被称为“展开”。"
".如果没有写register则什么都不会发生?"——初学者误解
• 这个输入框不会注册到表格程序中。至于结果是，
  • 页面上可编辑。
  • 在提交时无法获取其值。

）handle submit是做什么?

为什么需要它?"——初学者疑问
• handle submit 是专门负责收集数据和处理提交操作。当使用者点击“提交”时

b. 基本功能实现：必填项、长度限制、错误提示

.写法

"

> "规则通常放在register里面吗?—— 初学者确认"

> "

> "是的!就像这样:"

> "

> jsx`
``

> "
> "
> `"第一个字段名称 `>` username `> `:`字段名称"`<`
> `"第二个字段 `> `{ required:" 使用者名不能为空"} `> `:`此字段规则"`<"
<<"
<<"

`
{
required:" 使用者名不能为空 ",minLength:{
value :
message:" 最少位 "
}
}
<>
<>
<>
<>
<>`

""""""""""

""""""

"""""""

`