简介
react-tagsinput 是一个方便的 npm 包，用于创建一个 React 组件，可以让你轻松地输入标签，并且以简单的方式显示出来。在本文中，我们将深入探讨如何安装、使用和自定义 react-tagsinput。
安装
首先，您需要有一个 React 项目，然后使用 npm 进行安装。
--- ------- --------------- ------
快速使用
要使用 react-tagsinput，您需要首先导入组件。
------ --------- ---- ----------------- ------ -------------------------------------
然后，您可以在您的代码中很容易地使用它。
------ ------ - -------- - ---- -------
------ --------- ---- -----------------
------ -------------------------------------
-------- ----- -
----- ------ -------- - ------------
------ -
-----
---------- ------------ ------------------ --
------
-
-
------ ------- ---自定义
react-tagsinput 提供了许多属性，你可以自定义你的标签样式或者添加新标签的方式。
允许重复
默认情况下，react-tagsinput 不允许重复的标签。
---------- ------------ ------------------ --
您可以使用 onlyUnique={false} 为标签输入框允许重复。
---------- ------------ ------------------ ------------------ --
最小长度
如果您希望能够限制标签的最小长度，可以使用 minLength。
例如，在下面的示例中，最小长度为 2：
---------- ------------ ------------------ ------------- --
手动添加标签
如果您希望您的用户能够通过回车或空格之外的方式手动添加标签，可以使用 addKeys。
---------- ------------ ------------------ ------------ ---- -- --- --- ----- --
您还可以使用 addOnBlur，以便在用户离开标签输入框时添加标签。
---------- ------------ ------------------ ---------------- --
自定义样式
您可以使用 inputProps 属性自定义标签输入框的样式。
----------
------------
------------------
-------------
---------- ------------------
------------ ---- ----
--
--还可以使用 tagProps 属性自定义标签的样式。
----------
------------
------------------
-----------
---------- -----------------
--
--自定义渲染标签
您可以使用 renderTag 属性来自定义标签的渲染方式。
----------
------------
------------------
----------------- ---- --------- --------- ----------- -- -
----- ----------
-----
---------- --
-- --------------------- ------------ -- -------------- --
-
-------
--
--结论
如您所见，react-tagsinput 是一个相当易于使用和定制的 npm 包。无论您是新手还是经验丰富的开发人员，它都可以提高您的应用程序的交互性和可用性。感谢阅读本文，我们希望您现在可以开始在自己的项目中使用 react-tagsinput 了！
完整示例代码：
------ ------ - -------- - ---- -------
------ --------- ---- -----------------
------ -------------------------------------
-------- ----- -
----- ------ -------- - ------------
------ -
-----
------- - --------------- ---------
---------- ------------ ------------------ --
--------------
----
--------------- ------ -- -
------ --- ----------------------
---
-----
------
-
-
------ ------- ---来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/205033