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