downshift 是一个基于 React 的轻量级开源库，旨在提供一种快速、灵活地开发基于下拉列表的 UI 组件的方法。利用 downshift 可以快速地开发出具有下拉选择功能，支持键盘选择和搜索功能的下拉列表组件。在本篇文章中，我们将详细介绍下shift 的使用方法，并提供一些示例代码和使用技巧。
安装
可以通过 npm 安装 downshift 包：
npm install downshift --save
使用案例
下面我们介绍如何使用 downshift 实现一个简单的搜索框，下拉列表提供查询结果供选择。
首先，我们需要导入 downshift 库并创建 Select 组件：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ --------- ---- ------------
----- ------ ------- --------- -
----- - -
------ -
- ------ ------------- --- - --
- ------ ------- --- - --
- ------ --------- --- - --
- ------ ------ --- - -
--
------------- ----
--
-------------- - -------------- -- -
--------------- ------------ ---
--
-------- -
----- - ------ ------------ - - -----------
------ -
----------
------------------------------
-------------------- -- ----- - ---------- - ----
---------------------------
-
---
--------------
-------------
--------------
-------------
-------
-----------
-----------------
-------------
-- -- -
-----
------ --------------------------- --- ----------- ------------------
------ -------------------- --
--- --------------------
-------
- -----
-------------- -- ----------- -- ------------------------------------------------------------
----------- ------ -- -
---
------------------
---- --------
------
-----
------ -
---------------- ---------------- --- ----- - --------- - --------
----------- ------------ --- ---- - ------ - ---------
--
---
-
------------
-----
--
- -----
-----
------------- - -
---
--- ---- ------ -------------------------------------
----
- - -----
------
--
------------
--
-
-
------ ------- -------可以看到，这里我们创建了一个状态对象，其中包含一个 items 数组和一个 selectedItem 对象。items 数组包含所支持的编程语言列表，每个编程语言都有一个 value 属性和一个唯一的 id 属性。selectedItem 对象包含当前选中的编程语言。
handleOnChange 函数用于在 downshift 组件中选中项目时更新 selectedItem 状态。
下面我们看一下 Downshift 组件：
-- -------------------- ---- -------
----------
------------------------------
-------------------- -- ----- - ---------- - ----
---------------------------
-
---
--------------
-------------
--------------
-------------
-------
-----------
-----------------
-------------
-- -- -
-----
---
------
--
------------我们需要向 Downshift 组件传递几个属性和方法：
- onChange 必要属性，用于获取所选项的值。
- itemToString 函数，用于将选定的内容显示在输入框中。
- selectedItem 必要属性，用于在下拉列表中初始选择选项。
在 Downshift 组件内部，我们需要传递四个函数:
- getInputProps：获取 input 元素的 props。
- getItemProps：获取每个下拉列表项的 props（onClick、onMouseEnter 等事件）以及改变选项背景色等样式。
- getLabelProps：获取 label 元素的 props。
- getMenuProps：获取包括下拉列表项的 ul 元素的 props。
-- -------------------- ---- -------
-
------
- -----
-------------- -- ----------- -- ------------------------------------------------------------
----------- ------ -- -
---
------------------
---- --------
------
-----
------ -
---------------- ---------------- --- ----- - --------- - --------
----------- ------------ --- ---- - ------ - ---------
--
---
-
------------
-----
--
- ----
-getItemsProps 用到了 getItemProps 属性，创建一个下拉列表，利用 filter 方法过滤选择列表，筛选出与输入内容匹配的项，再利用 map 方法将新数组中的每个项链接到一个 li 标签上供选择。
结语
downshift 是一个强大的 React 库，它方便地实现了各种下拉列表的需求。在本文中，我们介绍了 downshift 的使用方法，并展示了如何利用其创建一个简单的搜索框示例。欢迎在实际项目中使用 downshift 来创建更加完善的下拉选择组件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/115806