引言
前端开发的日子越来越好过了，React 框架这样的前端框架，轻轻松松实现以前说起来都是空话的前端功能。就拿搜索框来说，过去要用createElement、addEventListener、getStyleProperty 等等一堆 API 才能实现，现在则可以使用 React Hook 快速实现。那么本文就来详细介绍如何利用 React Hook 实现一个简单的搜索框组件。
React Hook 简介
在 React 中，Hook 是一些可以让你在函数组件里“钩入” React state 及生命周期等特性的函数。Hook 不能在 class 组件中使用 —— 这使得你不使用 class 也能使用 React 的一些特性。
使用 Hook，你可以向函数组件中添加 state、生命周期等特性，并进行代码复用，使得代码更加简洁易懂。
实现搜索框组件
下面，我们来实现一个简单的搜索框组件。
1. 安装依赖
npm install --save react react-dom
我们需要安装 React 和 React Dom。
2. 实现 State
我们需要自定义一个 State，来存储用户输入的关键字。
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
----- ------ - -- -- -
----- --------- ----------- - -------------
------ -
------ ----------- --------------- --------------- -- ------------------------------- --
--
-
------ ------- -------上述代码中，useState 用于创建 state，关键字和 setKeyword 为自定义的 state 和更新 state 的方法，初始值为 ''。
3. 获取数据
当用户在搜索框中输入关键字后，我们需要将输入数据以参数形式传递到后端，并获取相应的搜索结果。这里我们没有实现获取数据的接口，只是通过 logging 的方式打印出用户输入。
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
----- ------ - -- -- -
----- --------- ----------- - -------------
----- ------------ - -- -- -
------------------------- ---------
-
------ -
-----
------ ----------- --------------- --------------- -- ------------------------------- --
------- ----------------------------------
------
--
-
------ ------- -------上述代码中，我们新增了一个 handleSearch 函数用于获取用户输入的关键字。
4. 完整代码示例
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
----- ------ - -- -- -
----- --------- ----------- - -------------
----- ------------ - -- -- -
------------------------- ---------
-
------ -
-----
------ ----------- --------------- --------------- -- ------------------------------- --
------- ----------------------------------
------
--
-
------ ------- -------总结
使用 React Hook 实现搜索框组件非常简单，我们只需要使用 useState 创建 state，获取用户输入的关键字，以参数的形式传递到后端，并获取搜索结果即可。本文提供了一个完整的代码示例，读者可据此参考实现自己需要的搜索框功能。另外，也可以探究其他 Hook ，进行更多有趣的功能开发，提高开发效率，增强代码的可读性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645f1e81968c7c53b0135e6c