介绍
在前端开发中，输入框是一个很常见的组件，而在输入框中输入多个 tag（标签）也是很常见的需求。@slightlytyler/react-tag-input 是一个非常方便的 npm 包，可以帮助我们快速实现 tag 输入框。本文就是一篇使用该 npm 包的详细教程，旨在帮助读者快速上手和深入了解该 npm 包的使用方法。
安装
首先，在项目中安装 @slightlytyler/react-tag-input：
npm install @slightlytyler/react-tag-input
或
yarn add @slightlytyler/react-tag-input
使用
导入 @slightlytyler/react-tag-input 包，然后在需要使用的组件中引用即可：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ -------- ---- ---------------------------------
----- --- - -- -- -
----- ------ -------- - -------------
----- ------------ - ----- -- -
----------------- ------
--
----- --------------- - ------- -- -
----- ------- - ----------
--------------------- ---
-----------------
--
------ -
-----
---------
-----------
-----------------------
-----------------------------
--
------
--
--
------ ------- ----在 TagInput 组件中，我们需要传入 tags、onAddTag 和 onRemoveTag 三个 prop：
tags：一个数组，用于存储所有输入的 tag。onAddTag：用于处理添加新 tag 的函数，它会接收一个新的 tag 值作为参数，我们可以在这个函数中更改tags的 state。onRemoveTag：用于处理删除 tag 的函数，它会接收一个包含要删除 tag 索引值的参数，我们可以在这个函数中从tagsstate 中移除对应的 tag。
自定义样式
要自定义样式，可以通过给 TagInput 添加 className 和自定义 CSS 样式来实现，例如：
<TagInput
tags={tags}
onAddTag={handleAddTag}
onRemoveTag={handleRemoveTag}
className={styles.tagInput}
/>可以在 CSS 文件中添加以下样式：
-- -------------------- ---- ------- --------- - ------- --- ----- ----- -------- ----- -------------- ---- - --------- ----- - ------------ ---- ------- ----- - --------- ---- - -------- ------------- ----------------- -------- -------- --- ----- ------------- ---- -------------- ---- - --------- ---------- - -------- ------------- ------------ ---- ------- -------- -
示例代码
以下是一个完整的 App.js 文件示例代码，其中包含了自定义样式：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ -------- ---- ---------------------------------
------ ------ ---- -------------------
----- --- - -- -- -
----- ------ -------- - -------------
----- ------------ - ----- -- -
----------------- ------
--
----- --------------- - ------- -- -
----- ------- - ----------
--------------------- ---
-----------------
--
------ -
-----
---------
-----------
-----------------------
-----------------------------
---------------------------
--
------
--
--
------ ------- ----CSS 文件代码：
-- -------------------- ---- ------- --------- - ------- --- ----- ----- -------- ----- -------------- ---- - --------- ----- - ------------ ---- ------- ----- - --------- ---- - -------- ------------- ----------------- -------- -------- --- ----- ------------- ---- -------------- ---- - --------- ---------- - -------- ------------- ------------ ---- ------- -------- -
以上就是本文介绍的 @slightlytyler/react-tag-input npm 包的详细教程，希望可以帮助读者更好地使用该 npm 包并实现自己的需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600572c581e8991b448e8e55