简介
如果你正在开发一个 React 应用，而需要一个方便的标签组件，那么 react-taggable 就是一个不错的选择。它可以让你通过可定制的 UI 方式来添加、删除和编辑标签。本文将详细介绍如何使用 react-taggable 来创建一个标签组件。
准备工作
在开始使用 react-taggable 之前，你需要先确保你已经安装了 React 和 React-DOM。如果你还没有安装它们，可以通过以下命令来安装：
npm install --save react react-dom
接着，你需要安装 react-taggable：
npm install --save react-taggable
安装完毕后，你就可以开始使用 react-taggable 了。
如何使用 react-taggable
首先，你需要引入 react-taggable：
import React from 'react'; import ReactDOM from 'react-dom'; import Taggable from 'react-taggable';
接着，你可以使用 Taggable 组件在你的应用中创建标签组件：
-- -------------------- ---- -------
----- --- ------- --------------- -
------------------ -
-------------
---------- - -
----- -
- ----- -------- --- - --
- ----- ------------- --- - --
- ----- ---------- --- - -
-
--
-------------------- - --------------------------------
----------------- - -----------------------------
-
-------------------- -
----- ---- - ------------------------ -- ---- --- --------
--------------- ---- ---
-
----------------- -
----- ---- - -------------------- - ----- ---- --- ---------- ---
--------------- ---- ---
-
-------- -
------ -
-----
---------
----------------------
----------------------------------
----------------------------
--
------
--
-
-
-------------------- --- ---------------------------------在上面的例子中，我们向 Taggable 组件传递了三个属性：
- tags: 表示标签数组，需要渲染的标签。
- onDeleteTag: 表示删除标签的回调函数。
- onAddTag: 表示添加标签的回调函数。
注意，handleDeleteTag 和 handleAddTag 都需要在构造函数中绑定 this，因为它们将被传递给 Taggable 组件并且需要使用 this.state。
现在，你已经成功地创建了一个标签组件！运行应用并查看效果：
-- -------------------- ---- -------
-------- -
------ -
-----
---------
----------------------
----------------------------------
----------------------------
--
------
--
-定制 Taggable 组件
Taggable 组件支持各种自定义选项，例如标签模板和颜色。下面是一个将模板和颜色应用到 Taggable 组件的示例：
-- -------------------- ---- -------
----- --- - -- ---- -------- -- -- -
-----
-----------------------
----- ----------- -- -----------------------------
------
--
----- --- - -- -- -
----- ------ -------- - ----------------
- ----- -------- --- - --
- ----- ------------- --- - --
- ----- ---------- --- - -
---
----- --------------- - ----- -- --------------------- -- ---- --- ---------
----- ------------ - ----- -- ----------------- - ----- ---- --- ---------- ----
----- ----------- - ----- -- ---- --------- -------------------------- ---
----- ----------- - ----------- ---------- ---------- ---------- -----------
------ -
-----
---------
-----------
-----------------------
-------------------------
-------------------------
--
------
--
--
-------------------- --- ---------------------------------我们创建了一个 Tag 组件作为标签模板，给它传递了标签和 onDelete 回调函数。我们还在组件中定义了颜色方案，然后将它们传递给了 Taggable 组件。
现在，运行该应用，你将看到一个可定制的标签组件，它可以添加、删除标签并具有自定义的外观。
总结
本文详细介绍了如何在 React 应用中使用 react-taggable 来创建一个可定制的标签组件。你已经学会了如何引入 react-taggable、创建标签数组、添加、删除标签以及定制标签组件的外观。开始使用 react-taggable 吧，让你的 React 应用变得更加美观和有用吧！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600557aa81e8991b448d4ae9