redux-typeahead 是一个基于 React 和 Redux 的自动完成包。它提供了一个可自定义和可配置的自动完成组件，支持异步和同步数据加载。
安装
使用 npm 安装 redux-typeahead：
npm install redux-typeahead
使用
异步数据加载
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- --------------
------ - --------- - ---- ------------------
----- ----------- ------- --------------- -
------------------- -
----------------------
-
-------- -
------ -
----------
---------------
-------------------------
--------------------------------
--------------------------------------
--
--
-
-
----- --------------- - ------- -- -
------ -
----- -----------
---------- ----------------
--
--
----- ------------------ - ---------- -- -
------ -
--------- -- -- -
----------------------
--
------------ ------------ -- -
---------------------------------
--
--
--
------ ------- ------------------------ ---------------------------------上面的代码展示了如何使用 redux-typeahead 处理异步数据加载。Typeahead 组件需要 options 属性来指定可选项数组，labelKey 属性来指定展示选项的键，isLoading 属性来指示数据是否正在加载，onInputChange 属性来处理输入值的变化。
所有的异步数据加载逻辑应该在 Redux 中处理。在上面的例子中，loadData 和 handleInput 都是 dispatch Redux action 的函数。
同步数据加载
-- -------------------- ---- -------
------ ----- ---- --------
------ - --------- - ---- ------------------
----- ----------- ------- --------------- -
------------------ -
-------------
---------- - -
----- --------- --------- ----------
--
-
-------- -
------ -
----------
---------------
-------------------------
--
--
-
-
------ ------- ------------上面的代码展示了如何使用 redux-typeahead 处理同步数据加载。Typeahead 组件接受一个数组作为 options 属性，并在输入框中自动完成。
配置
Typeahead 组件提供了许多其他的属性和方法来配置和扩展它的功能。在下面的例子中，我们将自定义渲染函数和过滤选项。
-- -------------------- ---- -------
------ ----- ---- --------
------ - --------- - ---- ------------------
----- ----------- ------- --------------- -
------------------ -
-------------
---------- - -
----- -
- --- -- ----- -------- --------- ------- --
- --- -- ----- --------- --------- ------- --
- --- -- ----- --------- --------- ------- --
- --- -- ----- --------- --------- ----------- --
- --- -- ----- ---------- --------- ----------- --
- --- -- ----- --------- --------- ----------- --
--
----------- ---
--
-
-------- -
------ -
----------
---------------
-------------------------
--------------------------------------
--------------------------------
---------------------- -- -
---------------- -----------------------
--
--------------------------------
--
--
-
----------------- - ------------ -- -
--------------- ---------- ---
--
------------ - -------- ----- -- -
------ ----------------------------------------------------- -- --
--
-
------ ------- ------------上面的代码展示了如何自定义渲染函数和过滤选项。renderMenuItem 属性指定了如何展示选项，filterOption 属性指定了如何过滤选项。
总结
redux-typeahead 是一个很好用的自动完成包，它提供了一些方便的功能，在前端开发中经常会用到。我们在这篇文章中学习了如何处理异步和同步数据加载，以及如何配置和扩展 redux-typeahead 的功能。希望这篇文章对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055ba881e8991b448d946c