介绍
React Tags 是一个易于使用的 React 组件，用于输入和呈现标签。该组件支持多个标记输入和自定义标记样式，可以很好地用于 Web 应用程序和移动应用程序中。
本文将介绍如何在 React 项目中安装和使用 React Tags。
安装
可以通过 npm 在 React 项目中安装 React Tags。打开命令行终端，输入以下命令：
npm install react-tags --save
如果你使用 yarn，可以输入以下命令：
yarn add react-tags
安装完成后，你可以在 React 应用程序中导入 React Tags：
import { WithContext as ReactTags } from 'react-tag-input';快速上手
React Tags 组件基于上下文（context）使用，接收一个数组作为标签数据，以及一些其他选项：
<ReactTags
tags={tags}
suggestions={suggestions}
handleDelete={handleDelete}
handleAddition={handleAddition}
handleDrag={handleDrag}
/>其中，tags 是一个数组，包含当前标记的值和样式。suggestions 是一个数组，包含一个建议标签列表，用于用户可以选择添加到输入字段中的新标签。每个建议对象应该具有 id 和 text 属性，text 属性用于显示建议标签。
handleAddition、handleDelete 和 handleDrag 的值是函数，用于处理相应的事件。这些函数接收一个参数（新增的标签、删除的标签或拖动的标签）。
API
suggestions
suggestions 属性是一个建议标签对象数组，表示一个用户可以选择添加到输入字段中的新标签。建议对象必须具有 id 和 text 属性，且不包含 tags 数组中已存在的标签，示例如下：
const suggestions = [
{ id: '1', text: 'JavaScript' },
{ id: '2', text: 'PHP' },
{ id: '3', text: 'Python' },
{ id: '4', text: 'Java' },
];tags
tags 属性是一个标签对象数组，表示当前标记的值和样式。每个对象必须具有一个 id 和一个 text 属性。可以使用 classNames 属性指定标签样式，style 属性指定标签样式，例如：
const tags = [
{ id: '1', text: 'JavaScript', classNames: 'tag-style' },
{ id: '2', text: 'React', classNames: 'tag-style' },
{ id: '3', text: 'Node.js', classNames: 'tag-style' },
];handleAddition
handleAddition 属性是一个函数，用于处理添加标签事件。该函数接收一个新增标签对象作为参数。
例如：
function handleAddition(tag) {
// 执行添加标签操作
}handleDelete
handleDelete 属性是一个函数，用于处理删除标签事件。该函数接收一个删除标签对象作为参数。
例如：
function handleDelete(tag) {
// 执行删除标签操作
}handleDrag
handleDrag 属性是一个函数，用于处理拖动标签事件。该函数接收一个拖动标签对象和一个目标索引作为参数。
例如：
function handleDrag(tag, currPos, newPos) {
// 执行拖动标签操作
}otherProps
除了以上的 props 外，还可以使用 otherProps 进行自定义配置，示例如下：
-- -------------------- ---- -------
----------
-----------
-------------------------
-------------------------------
---------------------------
-----------------------
-------------------
----------------
------------
---------------------
----------------- -- ----
------------------
-------------
----- -----------------
--------- ------------
--------- ---------------
---- ------------
------- -------------
------------ ------------------------
----------------- --------------------
--
--其中，可用的配置项如下：
placeholder: 输入框的提示文本，默认值为空字符串。autofocus: 是否自动聚焦输入框，布尔值，默认为false。tabIndex: 输入框的tabindex属性值，默认值为1。allowDragDrop: 是否允许标签拖拽，布尔值，默认为true。delimiters: 允许输入框中的字符键码值数组，它们作为组合键被拦截，默认值为[13, 188]。minQueryLength: 每次输入字符要求的最短长度，默认为 2。classNames: 标签、输入、建议列表的样式类名，可自定义。
示例代码
下面是一个完整的 React Tags 示例代码，其中包括标签输入、标签删除、标签拖放和建议标签功能：
-- -------------------- ---- -------
------ - ----------- -- --------- - ---- ------------------
----- -------- - -- -- -
----- ------ -------- - ----------
- --- ---- ----- ------------- ----------- ----------- --
- --- ---- ----- -------- ----------- ----------- --
- --- ---- ----- ---------- ----------- ----------- --
---
----- ------------- --------------- - ----------
- --- ---- ----- ------------ --
- --- ---- ----- ----- --
- --- ---- ----- -------- --
- --- ---- ----- ------ --
---
----- ------------ - --------------- -- -
------------ -- ------------- -- ---- --- ---------
-- ----
----- -------------- - --------------- -- -
------------ -- --------- ------
-- ----
----- ---------- - ----------------- -------- ------- -- -
----- ------- - -------------
----------------------- ---
---------------------- -- -----
-----------------
-- --------
------ -
----------
-----------
-------------------------
---------------------------
-------------------------------
-----------------------
-------------------
----------------
--
--
--
------ ------- ---------总结
React Tags 组件是一个非常实用的标记输入和展示组件，可以帮助我们更快速地开发 Web 应用程序和移动应用程序。
在使用 React Tags 页面中，需要注意的是：
- 重视 React Tags 组件的上下文使用。
- 了解
tags、suggestions、handleAddition、handleDelete、handleDrag和otherProps属性。 - 确保使用合适的 props 和事件进行定制和个性化开发。
希望这篇文章能够帮助你更好地理解和使用 React Tags。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005702f81e8991b448e7d6b