在现代的 Web 开发中，前端框架和库日益丰富，但随之而来的问题是，我们需要学习各种不同的 API 和技术，这增加了我们学习和使用这些工具的难度。@eliperkins/downshift 是一个专门为下拉选择框（drop-down）和自动补全（autocomplete）设计的 React 组件，它提供了一种简单而高效的方式来处理这些问题。
下载和安装
使用 npm 可以很容易地安装 @eliperkins/downshift：
npm install @eliperkins/downshift
使用方法
下面是一个简单的例子，展示如何使用 @eliperkins/downshift。
基本用法
-- -------------------- ---- -------
------ ----- ---- --------
------ --------- ---- ------------------------
----- ----- - --------- ------- ----------
----- ---------------- ------- --------------- -
----- - - ----------- -- --
------------ - ----------- -- -
--------------- ----------- --------- ---
--
-------- -
------ -
----------
----------------------------
-------------------- -- ----- - ---- - ----
-
---
--------------
--------------
-------------
-------------
-------
-----------------
-------------
-- -- -
-----
------ --------------------------- - --------------
------ -------------------- --
--- --------------------
------- --
-----
-------------- --
--------------------------------------------------
-
----------- ------ -- -
---
------------------
---- -----
------
-----
------ -
----------------
---------------- --- ----- - ----------- - -----
----------- ------------ --- ---- - ------ - -----
--
---
-
------
-----
---
-----
------
--
------------
--
-
-
------ ------- -----------------这个例子展示了一个简单的下拉框示例，其中包含一些与 Downshift 交互的 props 参数：
- onChange: 每当选择更改时都会调用此函数。
- itemToString: 将项目对象转换为字符串以在输入框中显示。
属性
下面是 Downshift 组件的一些常用属性：
- children: Downshift 使用 render prop 模式，子节点应该是一个函数，接受一个包含 Downshift 提供的方法和属性的参数对象，用于渲染 UI。
- onChange: 选择更改时调用的回调函数。
- itemToString: 将项目转换为字符串的函数。
- initialHighlightedIndex: 初始高亮的索引。
- initialSelectedItem: 初始选择的项目。
- multiple: 是否启用多选。
- onInputValueChange: 输入值更改时调用的回调函数。
- onOuterClick: 点击 UI 外部时调用的回调函数。
- onStateChange: 状态更改时调用的回调函数。
- highlightedIndex: 当前高亮的索引。
- inputValue: 当前输入的值。
- selectedItem: 当前选中的项目。
- dropdownDirection: 下拉框的方向。
渲染的 UI 结构
你也可以自定义 Downshift 渲染的 UI，例如：
-- -------------------- ---- -------
----------
----------
--------------
-------------
-------------
-------
-----------
-------------
-----------------
-- -- -
-----
------ -------------------- --
--- --------------------
-------
- -----
--------
------ --
----------- --
-----------------------------------------------------
-
----------- ------ -- -
---
------------------
---- -----
------
-----
------ -
----------------
---------------- --- -----
- -----------
- --------
----------- ------------ --- ---- - ------ - ---------
--
---
-
------
-----
--
- -----
-----
------
--
--总结
@eliperkins/downshift 提供了一种灵活的方式来处理下拉框和自动补全功能。通过了解 Downshift 的 API 和使用方法，我们可以方便地在 React 应用程序中实现这些功能。希望这篇文章对您有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056b2181e8991b448e53a2