前言
npm是前端开发中最常用的包管理器，能够方便地管理所需要的各种包。本文将介绍一款名为react-input-autocomplete的npm包，并提供详细的使用教程以及示例代码。react-input-autocomplete是一款React组件，用于快速构建输入自动完成功能。
安装
使用npm安装react-input-autocomplete非常简单，只需在项目中运行以下命令即可：
npm install react-input-autocomplete
使用
react-input-autocomplete是建立在React组件之上的，我们需要将其导入到我们的React组件中。在这里，我们将使用ES6模块和default导出。
-- -------------------- ---- -------
------ ----- ---- --------
------ ------------ ---- ---------------------------
----- ----------- ------- --------------- -
------------------ -
-------------
---------- - -
----- ---
----- --
--
-
------------------- -
-- ----
-------------------
-------------- -- ----------------
---------- -- -
--------------- ---- --
--
------------ -- -
---------------------
---
-
-------- -
------ -
-------------
-----------------------
------------------------ ------ -- ----------------------------------------------------- - ---
------------------ -------------- --
---- -------- ----------- ------------- - ----------- - ------- ---
------------
------
-
-----------------------
----------- -- --------------- ----- -------------- ---
--------------- -- --------------- ----- ----- ---
--
--
-
-以上代码展示了如何将react-input-autocomplete应用到自己的React组件中。在componentDidMount方法中，我们使用fetch API获取数据，并将其从组件状态中data属性中传递到AutoComplete组件中。我们可以通过设置shouldItemRender属性和renderItem属性，自定义显示在预测框中的数据。value属性和onChange属性唯一的目的是当然是控制input元素的状态。
参数
下面是我们在前面示例代码中使用的所有参数的解释：
items
类型：Array
必需 prop：是
包含我们将搜索的所有项的数组。
shouldItemRender
类型：function
必需prop：否
应接受每个项目和当前输入值作为参数，返回布尔值表示项目是否应呈现在自动完成框中。默认行为是在标签中查找输入所包含的值。
renderItem
类型：function
必需prop：否
将渲染自动完成框中的列表项。您可以返回任何内容。
value
类型：String
必需prop：是
表示当前输入状态的值。
onChange
类型：function
必需prop：是
每次输入更改时调用的回调。应接受当前输入状态的值作为参数。
onSelect
类型: function
必需prop: 否
当用户选择一个值时调用的回调。应该接受值作为参数。
结论
react-input-autocomplete可以帮助我们快速实现输入自动完成功能，让我们更加专注于业务逻辑的实现。此外，在上述示例中，我们使用了fetch API来获取数据，这也对axios、jQuery等库的使用有一个验证。
示例代码
完整的示例代码可以在我的GitHub上找到。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600566b581e8991b448e304a