在过去，React 的组件功能局限于类组件，这意味着我们必须使用 class 组件来实现组件的状态和生命周期逻辑。但随着 React Hooks 的发布，我们可以在函数组件中使用状态和其他 React 功能。Hooks 能够带来许多便捷的特性，如副作用处理，状态管理和组合等。在本篇文章中，我们将介绍如何使用 React Hooks 实现一个表单。
为什么使用 React Hooks？
使用 React Hooks 有以下好处：
- 代码更加简洁和易于维护，同时消除了类组件中的一些不必要的模板代码。
- 函数组件可以更方便地实现逻辑复用，减少重复代码。
- 使用 Hooks 可以解决类组件中的一些实现不够优雅的问题。
如何实现一个表单
假设我们要实现一个简单的表单，让用户输入用户名和密码，然后将它们打印在控制台中。为此，我们需要创建一个包含表单的组件，并在组件中处理表单数据的状态。
创建组件
我们可以创建一个名为 LoginForm 的函数组件，并将其输出作为一个简单的表单：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- -------- ----------- -
------ -
------
-------
---------
------ ----------- --
--------
-------
---------
------ --------------- --
--------
------- -----------------------------
-------
--
-状态管理
我们需要为表单管理输入的值，并在用户提交表单后获取它们的值。Hooks 提供了 useState 方法，可以方便地实现表单的状态管理。我们可以使用以下代码导入 useState：
import React, { useState } from 'react';然后，我们可以使用以下代码来管理 LoginForm 组件的状态：
-- -------------------- ---- -------
------ ------- -------- ----------- -
----- ---------- ------------ - -------------
----- ---------- ------------ - -------------
----- ------------ - ------- -- -
-----------------------
---------------------- ----------- --------- --------------
--
------ -
----- ------------------------
-------
---------
------ ----------- ---------------- ----------------- -- -------------------------------- --
--------
-------
---------
------ --------------- ---------------- ----------------- -- -------------------------------- --
--------
------- -----------------------------
-------
--
-我们使用 useState 方法创建了两个状态变量 username 和 password 以及两个更新函数 setUsername 和 setPassword。然后，我们在表单的输入框中使用这些状态变量和更新函数。
处理提交
最后，我们需要在表单提交时获取输入的值。我们可以创建一个名为 handleSubmit 的函数，将其传递给表单的 onSubmit 属性，并在该函数内获取 username 和 password 的值，并将它们打印到控制台中。
const handleSubmit = (event) => {
event.preventDefault();
console.log(`Username: ${username} Password: ${password}`);
};如果我们要在页面中显示这些值，我们可以将它们保存到状态中并在页面上呈现它们。例如，我们可以将一个新的状态 submitted 添加到组件中，以标记表单是否已被提交，并根据情况在页面上呈现用户名和密码。
下面是完整的代码：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ ------- -------- ----------- -
----- ---------- ------------ - -------------
----- ---------- ------------ - -------------
----- ----------- ------------- - ----------------
----- ------------ - ------- -- -
-----------------------
-------------------
---------------------- ----------- --------- --------------
--
------ -
----- ------------------------
-------
---------
------ ----------- ---------------- ----------------- -- -------------------------------- --
--------
-------
---------
------ --------------- ---------------- ----------------- -- -------------------------------- --
--------
------- -----------------------------
---------- -- -
-----
------------ --------------
------------ --------------
------
--
-------
--
-现在，我们已经成功地使用 React Hooks 创建了一个完整的表单！
总结
在本篇文章中，我们介绍了如何使用 React Hooks 实现一个简单的表单。同时，我们也讨论了 Hooks 带来的好处和使用它的首要原因。
在使用 React Hooks 时，请注意以下几点：
- 不要在循环、嵌套函数中，以及条件语句中使用 Hooks。
- 在自定义 Hooks 中，务必使用
use作为前缀，以便其他开发人员更容易地识别出这些 Hooks。 - 尽可能地将逻辑划分成自洽的部分，采用多个小 Hooks 实现，而不是实现一个大型的 Hook。
希望本篇文章能对你在 React 中使用 Hooks 时受到一些启发，让你在自己的项目中从中受益。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645bdf72968c7c53b0e2d731