react native开发搜索框_用React Hooks做一个搜索栏

作者 | adebola 译者 | 王强 策划 | 小智

本文最初发布于 Hackernoon 博客，经原作者授权由 InfoQ 中文站翻译并分享。

以下是我们将要构建的搜索框的动图。这是一个简单的搜索框，我们可以用它来搜索联系人列表。我们将使用函数式组件，而不是基于类的组件来实现它。

下面就开始吧。首先创建一个新的 React 应用：

create-react-app contacts-

然后转到 contacts-list 目录。在你常用的代码编辑器中打开目录。就我而言，我使用的是 vscode，因此我要从命令行执行的操作是：

code .

在 src 目录中创建一个名为 components 的新文件夹，并在其中创建一个 Numbers.js 文件。转到你的 App.js 文件并导入 Numbers.js 组件。

接下来我们需要创建一些人名，然后将这些人名作为 props 传递给 Numbers.js 组件来渲染。

import React, { useState } 

现在在我们的 Numbers 组件中，我们将接收从 App 传递过来的 props，并使用它来显示 contacts list。

参见下面的代码，其中包含每个步骤的解释说明。

import Rect, { useStae } 

最后，每次更新时，我们都会从 FilterDisplay 返回更新的信息。如果你和我一样想将搜索栏分成一个单独的组件，请继续看下去。下面我们来重构这个东西！将搜索拆分成一个单独的组件后，我们就可以在应用程序的其他组件中使用同样的搜索栏了。

首先我们创建一个 Filter 组件，在我们的 components 文件夹中将其命名为 Filter.js。它需要 2 个 props，分别用于输入值和 onChange 事件。

import React 

接下来我们需要重构 Numbers.js 组件，让它只渲染过滤过的人员列表。它将接受一个 prop，也就是 list/array。

import React 

回想一下，我们所有的状态都在 App 组件内管理，并作为 props 传递给我们的组件。最后，在 App 组件中我们将一个有状态值传递给 Filter 组件中的输入字段，还将传递一个 handleChange 方法，当输入字段中发生更改时将调用这个方法。

import React, { useState } 

在 return 中，我们的 Numbers 组件将始终检查输入字段是否为空白。如果是的话就渲染原始的 Persons 数组，否则我们根据在输入字段中输入的内容渲染列表。就是这样，搞定！

延伸阅读

https://hackernoon.com/how-to-build-a-search-bar-in-react-with-react-hooks-o77l3yl7

活动推荐

作为一名前端工程师，需要具备哪些核心技能？

前手机淘宝前端工程师负责人 winter 认为，最核心的能力包括编程能力、架构能力和工程能力。

• 编程能力，就是用代码解决问题的能力；

• 架构能力，就是掌控复杂系统的能力；

• 工程能力，其实核心就是成事的能力。

这三项能力可以说都是从初级、中级走向高级必须要跨越的鸿沟，怎么系统性提高呢？这里推荐给你 「极客时间前端工程师系列课程」 ，对标阿里 P5-P8 前端工程师技能，从前端工程师到高级前端专家都可以找到适合自己的课程。现在企业都可以免费学习，扫码领课↓