react-autocomplete-tags 是一个帮助前端开发者快速构建标签输入框的 npm 包。它允许用户通过输入或选择现有的标签，并同时支持创建新的标签，是一个非常方便和易用的组件。
本文将详细介绍如何使用 react-autocomplete-tags，从安装到使用的具体操作，以及一些实用技巧和注意事项。
安装
在使用此组件前，首先需要在你的项目中安装它。你可以使用 npm 或者 yarn 进行安装：
使用 npm：
npm install react-autocomplete-tags --save
使用 yarn：
yarn add react-autocomplete-tags
使用
安装完成后，你就可以在项目中引入此组件并进行使用了。下面是一些示例代码以供参考。
首先，我们需要在项目中引入 react-autocomplete-tags：
import React, { useState } from 'react';
import AutoCompleteTags from 'react-autocomplete-tags';然后，在 render 函数中，我们可以创建一个标签输入框：
-- -------------------- ---- -------
-------- ----- -
----- ------ -------- - -------------
----- -------------- - ----- -- ----------------- ------
----- ------------- - ------- -- -
----- ------- - ----------
--------------------- ---
-----------------
--
------ -
---- ----------------
-----------------
----------------------- --------- ----------
-----------
-------------------------------
-----------------------------
--
------
--
-在这个代码中，我们通过 useState 创建了一个名为 tags 的 state，用于保存用户选择的标签。然后，我们定义了两个函数 handleAddition 和 handleRemoval，分别用于添加标签和删除标签。在 render 函数中，我们将这些信息传递给 AutoCompleteTags 组件。
现在，在页面上展示的就是一个带有建议和已选择标签的标签输入框了。
参数
除了上面示例代码中涉及到的参数 suggestions、tags、handleAddition 和 handleRemoval 之外，react-autocomplete-tags 还有许多其他参数可以供使用者配置。下面是一个完整的参数列表：
-- -------------------- ---- ------- ----------------- ------------------- -- ------ ------------ -- ------- ------------------------- -- --------- ------------------------ -- --------- -------------------- -- ------- ----------------- -- --------- --------------------- -- -------- ----------------------- -- ---------- ----------------------- -- ----- --------------------------- -- -------- ------------------- -- ----- ------------------- -- ------ ------------------------------ -- ------ ---------------------- -- --- ------------------------- -- ------- --
其中，特别需要注意的是：
- suggestions 和 tags 必须为数组类型，handleAddition 和 handleRemoval 必须为回调函数类型
- 示例代码中的 handleAddition 和 handleRemoval 可以自定义名称，但要保证其类型为回调函数类型，并具有与示例代码中同样的参数型式
- 通过设置 allowCreate 为 true，可以在用户输入一个新的标签时自动创建该标签
- delimiterChars 用于设置分隔符，示例代码中使用的默认分隔符为英文逗号（,）
实战技巧
除了上面提到的一些注意事项外，下面是一些更为具体的实战技巧。虽然这些技巧对于初学者不是必要的，但若能掌握它们，将极大地提高你的生产力和代码质量。
安装和使用不同版本的 react-autocomplete-tags
如果你要使用 react-autocomplete-tags 的旧版本，可以在安装时指定想要安装的版本号。例如：
npm install react-autocomplete-tags@1.0.0 --save
如果你要最新版本，则无需显式指定。
使用自定义样式渲染组件
如果你想自定义样式，可以使用 ReactAutocompleteTagsMixins，这是一个混合对象，用于扩展 AutoCompleteTags 组件。下面是一个示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ ---------- ---- -------------
------ - ---------------- - ---- --------------------------
----- --------------------------- - -
------------- -
--------------- ---
----------------- ---
----------------------- ---
--
------- -------- -- -
----- - --------------- ----------------- ---------------------- - - -----------
----- - ------------ ----- -------- - - -----------
----- - --------------- ------------ - - -----
------ -
---- ---------------------------
--------------- -- -- -
-----
-----------
---------------------------- ----------------
----------- -- ----------------
-
-----
-------
---
------
-----------
------------------------------ ------------------
----------------
-------- -- ------------- - ----
----------------------------
------------------------------
------------------------------------
--
------------------- -- -
--- ------------------------------------ -------------------------
----------------------------- -- -- -
--- ------------------ --------------------------- ----------- -- ----------------------------
------------
-----
---
-----
--
------
--
--
--
----- ---------- ------- ---------------- -
------------------ -
-------------
------------------- -----------------------------
---------- - ------------------------------
-
-
------ ------- -----------这段代码的作用是通过扩展混合对象，对 AutoCompleteTags 组件进行了自定义样式渲染。在代码中，我们创建了一个名为 CustomTags 的组件，该组件继承了 AutocompleteTags 并拷贝了 ReactAutocompleteTagsMixins 中的 render 函数。
当你进行自定义样式渲染时，需要通过一个新建的组件来渲染。使用方法如下：
<CustomTags customTagClass="my-tag-class" customInputClass="my-input-class" customSuggestionsClass="my-suggestions-class" />
在这个代码中，我们给 CustomTags 组件添加了三个可选的 className 属性。如果不指定，则将使用默认样式。
渲染 HTML 字符串
在某些情况下，我们可能需要讲包含 HTML 标签的字符串渲染为页面中的标签。下面是一个基于原有组件的自定义组件，专门用于渲染 HTML 字符串：
-- -------------------- ---- -------
------ ---------------- ---- --------------------------
----- ---------------------------- - -- ----- -------- -- -- -
----- ----------- - ----- -- --------- --- ---
------ -
-----------------
----------------------------
------------- ---- -- ------ -- -- -
------ -
----
-----------------------
-------
-----------------------------
-
------- ----------- -- ---------------------
------
-
--
----------
--
-
-在组件中，我们使用 dangerouslySetInnerHTML 属性来将 HTML 标签字符串渲染到页面中。我们还将 tag 对象扩展为一个拥有 __html 属性的对象，以便更轻松地用于渲染过程。
在使用时，只需通过 AutocompleteTagsWithRichText 组件传递相应的 tags 即可：
<AutocompleteTagsWithRichText
tags={['<strong>strong tag</strong>', '<em>em tag</em>']}
/>结论
react-autocomplete-tags 是一个基于 React 的标签输入框，可以让开发者更方便地创建标签选择器。本文介绍了 react-autocomplete-tags 的相关操作，包括安装，基本使用，以及一些实用技巧。如果你需要一个快速而可定制的标签选择器，react-autocomplete-tags 会是一个不错的选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055b8481e8991b448d91a7