在前端开发中，我们常常会使用 npm 包来帮助我们完成一些需求。今天我们将介绍一款实用的 npm 包 react-taggy-jr，并且为大家详细讲解如何使用它。
什么是 react-taggy-jr
react-taggy-jr 是一款基于 React 的标签组件库，可以用于创建多种类型的标签，如标签选择器、标签输入框等。
安装 react-taggy-jr
使用 react-taggy-jr 前，我们需要先安装该 npm 包。
通过 npm 安装：
--- ------- --------------
或通过 yarn 安装：
---- --- --------------
如何使用 react-taggy-jr
react-taggy-jr 主要包含了两种组件：Tag 和 TagPicker。
Tag
Tag 组件是一款非常简单的标签组件，你可以用它来表示一个简单的标签。
------ - --- - ---- -----------------
-------- ----- -
------ -
-----
-------- -------
-------- -------
-------- -------
------
--
-如上所示，我们直接在代码中使用 <Tag> 组件，然后在组件中输入需要显示的标签内容即可。
TagPicker
TagPicker 组件是一款标签选择器组件，你可以用它来添加、删除、修改多个标签。
------ - --------- - ---- -----------------
-------- ----- -
----- -------------- ---------------- - -------------- -----
----- ------------ - --- -- -
-------------------- -- --------- ------
--
----- --------------- - --- -- -
-------------------- -- ------------- -- - --- ------
--
------ -
----------
---------------------------
-----------------------
-----------------------------
--
--
-如上所示，我们首先定义了一个 selectedTags 状态，用于存储选中的标签。然后我们定义了两个回调函数，用于添加和删除标签。最后我们将这些属性传递给 <TagPicker> 组件即可。
以上就是 react-taggy-jr 的使用教程。希望这篇文章能够对大家有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600559d581e8991b448d7582