简介
react-tags-editor 是一个 React 组件库，用于创建可编辑的标签。它可以让你在你的 React 应用程序中使用标签编辑器的功能，包括添加标签、删除标签以及自定义样式等。
安装
使用 npm 的方式安装 react-tags-editor：
npm install react-tags-editor
如果你使用的是 yarn，可以使用以下命令安装：
yarn add react-tags-editor
使用方法
导入
如果你的项目已经使用了 React，可以将 react-tags-editor 引入到组件中：
-- -------------------- ---- -------
------ --------- ---- --------------------
----- ----------- ------- --------------- -
-------- -
------ -
-----
---------- --
------
--
-
-基础使用
react-tags-editor 的默认行为是创建一个包含添加标签的 input 元素和一组标签的 div 元素。你可以将这个标签输入框的数据存储在 React state 中，并将其作为一个属性传递给 react-tags-editor：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ --------- ---- --------------------
-------- ------------- -
----- ------ -------- - -------------
----- ------------ - --------- -- -
-----------------
-
------ -
-----
---------- ----------- --------------------------- --
------
--
-现在你可以在标签输入框中添加新的标签，并在状态中存储它们。
自定义选项
react-tags-editor 支持通过 props 实现自定义样式和功能。以下是其中一些常见的选项：
tags: 一个数组，其中包含了所有标签的信息；placeholder: 在输入框中显示的默认文本；maxTags: 可添加的最大标签数；delimiters: 一个分隔符数组，用于分隔标签；suggestions: 提供给用户的建议；onTagsChange: 当标签添加或删除时，调用的回调函数。
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ --------- ---- --------------------
-------- ------------- -
----- ------ -------- - -------------
----- ----------- - -
- --- -- ----- ---- --
- --- -- ----- ---- --
- --- -- ----- ---- --
- --- -- ----- ---- --
--
----- ------------ - --------- -- -
-----------------
-
------ -
-----
----------
-----------
-------------------------
------------------
------------------ ---
-----------
---------------------------
--
------
--
-上述代码会创建一个具有自定义样式和选项的标签输入框。
自定义样式
react-tags-editor 允许你通过 CSS 自定义样式。你可以使用以下样式类名：
react-tags-editor: 包含了整个标签编辑器；react-tags-editor__tag: 每一个标签的样式；react-tags-editor__tag-value: 每一个标签的文本样式；react-tags-editor__remove: 标签中的删除图标。
-- -------------------- ---- ------- ------------------ - ---------- ----- ------- --- ----- ----- -------- ---- - ----------------------- - -------- ------------- ----------------- -------- -------------- ---- ------------- ---- ----------- ---- -------- --- ---- - ----------------------------- - ------ -------- - -------------------------- - ------ ----- ------- ----- -------------- ---- ----------------- -------- ------ -------- ---------- ----- ------------ ----- ----------- ------- -------- ------------- ------------ ---- ------- -------- -
示例代码
下面是一个具有自定义样式和选项的 react-tags-editor 示例：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ --------- ---- --------------------
------ -----------------
-------- ------------- -
----- ------ -------- - -------------
----- ----------- - -
- --- -- ----- ---- --
- --- -- ----- ---- --
- --- -- ----- ---- --
- --- -- ----- ---- --
--
----- ------------ - --------- -- -
-----------------
-
------ -
-----
----------
-----------
-------------------------
------------------
------------------ ---
-----------
---------------------------
-------------
----- ----------
---- ---------
--------- ---------------
------- ----------------
--
--
------
--
-MyStyles.css 文件中定义了 CSS 样式，具体内容见上述代码中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005579181e8991b448d48fd