在前端开发中，autocomplete 功能是非常常用的，实现它有很多方法，但是使用开源项目可以让开发更方便。
本文介绍 npm 包 bs-downshift，bs-downshift 是一个 React 组件库，它可以帮助你轻松地实现“下拉列表”、“自动完成关键词输入补全”等常见功能。下面我们将通过一个使用实例来讲解它的使用方法。
bs-downshift 安装
要使用 bs-downshift 需要安装它，可以通过 npm 进行安装，命令如下：
--- ------- ------------ ------
安装完成后，在你的项目里引入下面这个样式文件：
----- ---------------------------------------------------- ---------------- --
bs-downshift 示例
下面我们将用 bs-downshift 实现一个下拉列表的功能。首先，我们在 React 组件中引入 bs-downshift，如下：
------ - --------- - ---- ---------------
然后，我们需要将下拉列表需要显示的数据传入组件，也就是 items：
----- ----- - - ------------- ------- --------- ------- ------ ------ ------- ------ --
现在，我们可以开始构造 Downshift 组件了。假如我们需要一个输入框，在输入过程中会有提示下拉列表，用户可以通过鼠标和键盘进行选择，其选择的结果可以显示在输入框中。我们可以采用以下代码实现：
----------
------------------- -- ---------- -------- ---------------
------------------ -- ----- - ---- - ----
-
---
--------------
-------------
-------------
-------
-----------
-------------
-----------------
-- -- -
-----
------ ------------------- ------------ -------- --- --
--- --------------------
-------
- -----
------------ -- ----------- -- --------------------------
----------- ------ -- -
---
------------------
---- -----
------
-----
------ -
----------------
---------------- --- ----- - ----------- - --------
----------- ------------ --- ---- - ------ - ---------
--
---
-
------
-----
--
- -----
-----
------
--
------------现在，你可以在输入框中输入你需要的文字，然后按下箭头键，在下拉的列表中选择你需要的选项。我们将这个组件简称为 Autocomplete。
下面，我们分别分析一下 Autocomplete 组件中的各个参数：
- onChange：当用户选择一个选项时被触发，其参数 selection 即为所选择的选项值。
- itemToString：将选项值转换为字符串的回调方法。
- getInputProps：获取显示输入框的 props。
- getItemProps：获取显示单个选项的 props。
- getMenuProps：获取下拉列表包裹元素的 props。
- isOpen：标识下拉列表是否可见。
- inputValue：输入框中的当前值。
- selectedItem：当前所选项的选项值。
- highlightedIndex：当前鼠标（或键盘）选中项的下标。
以上参数中的方法都是 Downshift 组件自带方法，开发者只需调用即可，无需像原生的实现那样从头到脚遍历编写大量的逻辑代码。
组件定制化
用户可以通过定义 render 方法，来进行组件的定制化，实现最精准的组件调整。我们使用 Autocomplete 组件进行讲述，代码如下：
-------- -
----- - ------ -------- - - -----------
------ -
---------- -----------
---
--------------
-------------
-------
-----------
-------------
-----------------
-- -- -
-----
------ ------------------- ------------ --------- --- --
------- - -
---- -------- ------- ---- ----- ----- ---
------
------------ -- ----------- -- --------------------------
----------- ------ -- -
----
------------------
---- -----
------
-----
------ -
----------------
---------------- --- ----- - ------ - --------
----------- ------------ --- ---- - ------ - ---------
--
---
-
------
------
---
------
- - -----
------
--
------------
-
-以上代码中，我们通过定义 render 方法，对 Downshift 进行了一个最精准的调整，这让组件的定制化变得更高效。
结语
如果你在开发过程中遇到了“下拉菜单”、“自动完成提示”等需求时，bs-downshift 就是一个十分方便简洁的解决方案。它封装了大量的处理代码，使你的开发更加高效，让你更快地将产品带给用户，让他们享受更加智能、流畅、极简的用户体验。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60066c8bccdc64669dde5306