在进行前端开发的过程中，我们经常需要使用一些第三方库来加速开发。其中，npm 是最常用的第三方库管理工具之一，而 react-tag-autocomplete 是一个高级的自动完成输入框组件，可以帮助我们更加便捷地开发输入框功能。
在本篇文章中，我们将详细介绍 npm 包 react-tag-autocomplete 的使用方法。我们将从环境安装、基本属性、事件响应与实战应用等方面，为大家全面阐述这个库的使用方法。
环境安装
首先，我们需要安装 react-tag-autocomplete。在使用之前，确保您的项目中已经集成了 React 以及其他必要的依赖库。您可以使用以下命令在 npm 中安装 react-tag-autocomplete：
npm install react-tag-autocomplete
接下来，您可以在您的代码中导入 react-tag-autocomplete：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ - ------------ - ---- -------------------------
-------- ----------------------- -
----- ------ -------- - ----------
- --- -- ----- ------------ --
- --- -- ----- ------- --
- --- -- ----- ------ --
- --- -- ----- ----- --
---
----- ------------ - --- -- -
----- ------- - --------------
----------------- ---
-----------------
-
----- -------------- - ----- -- -
----------------- ------
-
------ -
-------------
--------------
- --- -- ----- -------- --
- --- -- ----- ------ --
- --- -- ----- ------ --
- --- -- ----- ----- --
--
------------
-----------------------
---------------------------
--
--
-在 import 中，我们导入了 Autocomplete 组件，该组件将渲染出一个输入框，该输入框可以添加标签，并通过标签名提示功能。
在这个示例中，我们初始化了一个 tags 状态，它包含了若干个标签。我们定义了两个回调函数 handleDelete 和 handleAddition。当用户移除一个标签时，系统将响应 handleDelete 函数，在这里我们使用了 splice 方法从 tags 数组中移除了对应的标签，并使用 setState 方法更新状态。当用户添加一个标签时，我们使用 spread 运算符将新的 tag 追加到 tags 数组中，并使用 setState 方法更新状态。
在 <autocomplete> 组件中，我们为它传递了以下几个属性：
- suggestions：输入框会显示这个属性中定义的所有选项；
- value：输入框中已经存在的值；
- onDelete：当用户删除标签时，系统将调用这个回调函数；
- onAddition：当用户添加标签时，系统将调用这个回调函数。
添加了这些属性后，我们已经成功渲染出了一个能够添加标签的输入框。
基本属性
我们已经可以看到如何使用 react-tag-autocomplete，并且了解了它的工作原理。接下来，我们将详细介绍该库的基本属性。
suggestions
suggestions 是一个必须传递的属性，用于指定所有选项。该属性应该是一个数组，每个元素必须具有 id 和 name 属性。
[
{ id: 1, name: 'Green' },
{ id: 2, name: 'Red' },
{ id: 3, name: 'Blue' },
{ id: 4, name: 'Yellow' },
]value
value 属性指定输入框中的标签，它应该是一个数组，每个元素至少应该具有 id 或 name 属性中的一个。
[
{ id: 1, name: 'Green' },
{ id: 2, name: 'Red' },
]placeholder
placeholder 属性用于为输入框提供一个占位符。
<Autocomplete ... placeholder="请输入标签" />
noOptionsText
noOptionsText 属性用于指定没有可用选项时的文本。
<Autocomplete ... noOptionsText="没有可用选项" />
additionalProps
additionalProps 属性可以传递一系列辅助参数。
<Autocomplete
additionalProps={{
inputProps: { 'aria-label': '标签搜索' },
wrapperProps: { className: 'autocomplete-wrapper-class' },
}}
...
/>additionalProps 包含 inputProps 和 wrapperProps 两个属性。inputProps 用于为 <input> 元素添加属性，wrapperProps 用于为外层 <div> 元素添加属性。
事件响应
除了基本属性之外，我们还可以使用 react-tag-autocomplete 提供的事件，以响应用户输入。
onInput
onInput 事件相当于 <input> 元素的 onChange 事件。
<Autocomplete
...
onInput={(event, value) => {
console.log(event, value);
}}
/>onFocus
onFocus 事件相当于 <input> 元素的 onFocus 事件。
<Autocomplete
...
onFocus={(event) => {
console.log(event);
}}
/>onBlur
onBlur 事件相当于 <input> 元素的 onBlur 事件。
<Autocomplete
...
onBlur={(event) => {
console.log(event);
}}
/>onKeyDown
onKeyDown 事件相当于 <input> 元素的 onKeyDown 事件。
<Autocomplete
...
onKeyDown={(event) => {
console.log(event);
}}
/>onKeyUp
onKeyUp 事件相当于 <input> 元素的 onKeyUp 事件。
<Autocomplete
...
onKeyUp={(event) => {
console.log(event);
}}
/>实战应用
在实战中，我们可以使用 react-tag-autocomplete 来构建一个完整的标签输入框。
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ - ------------ - ---- -------------------------
-------- ----------- -
----- ------ -------- - -------------
----- ------ -------- - -------------
----- -------------- - ----- -- -
----------------- ------
-
----- ------------ - --- -- -
----- ------- - --------------
----------------- ---
-----------------
-
----- ------------ - ------- -- -
----------------------------
-
----- ------------------ - ------- -- -
-- -------------- --- -- -- ----------- - -- -
---------------- --- ----------- - -- ----- ---- ---
------------
-
-- ------------ -- ------------- --- - -- ------------- -
------------------------ - ---
-
-
------ -
-----
-------------
--------------
- --- -- ----- ------------ --
- --- -- ----- ------- --
- --- -- ----- ------ --
- --- -- ----- ----- --
--
------------
-----------------------
---------------------------
-------------------
------------------ ---------- -- --
------------------
----------- - ---------- ------------------ --
--
--
------
-----------
------------
-----------------------
--------------------------
--
------
--
-在这个示例中，我们项目中的 <Autocomplete> 组件已经支持从输入框中添加新的标签。当用户向输入框中输入文本时，我们会实时更新 text 的状态变量。如果用户在输入框中按下回车键，我们将使用 handleAddition 函数将其添加到标签列表中，并将新的 text 状态变量设置为空字符串。
我们还在 handleInputKeyDown 函数中支持了删除标签功能。如果用户在输入框中按下 Backspace 键，并且文本框中没有文字，则自动生成 handleDelete 函数，系统将删除标签列表中的最后一个标签。
通过这个示例，我们可以了解到 react-tag-autocomplete 在实际项目中的使用方法，并为大家提供了首个参考。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/the-react-tag-autocomplete