简介
igroot-tags 是一个基于 React 的标签输入组件，可以方便地实现输入多个标签的功能。
安装
npm install igroot-tags --save
使用
引入 igroot-tags
import IgrootTags from 'igroot-tags';
配置 igroot-tags
<IgrootTags
value={tags}
onInputChange={handleInputChange}
onTagAdd={handleTagAdd}
onTagRemove={handleTagRemove}
suggestionList={suggestionList}
inputPlaceholder="请输入标签"
/>props 说明
value: 已选中的标签列表，即当前组件状态，初始化时需要传入，修改时需要改变它；onInputChange: 输入框内容变化的事件回调函数，参数为输入框的内容；onTagAdd: 添加标签的事件回调函数，参数为新添加的标签；onTagRemove: 删除标签的事件回调函数，参数为待删除的标签；suggestionList: 标签建议列表，即用户输入时的智能提示，必须为数组，每个数组元素必须为字符串；inputPlaceholder: 输入框的占位提示文字。
示例
以下是一个基本示例，演示了如何使用 igroot-tags 实现标签输入功能：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ ---------- ---- --------------
------ ------- -------- ----------- -
----- ------ -------- - --------------------
----- ---------------- ------------------ - ------------------ ------ ------------
----- ----------------- - ------- -- -
-- ------------------------------------
----- ------- - ----- - ---------------------------- -- ------------------- - --- - ---------------
---------------------------
--
----- ------------ - ----- -- -
----------------- ------
--
----- --------------- - ----- -- -
-------------------------- -- ---- --- ------
--
------ -
-----
-----------
------------
---------------------------------
-----------------------
-----------------------------
-------------------------------
------------------------
--
------
--
-总结
igroot-tags 是一个实现标签输入功能的开源组件，使用它可以快速方便地实现标签输入功能。在使用 igroot-tags 时，我们需要注意组件所支持的 props，以及如何处理输入框内容变化、添加标签、删除标签等事件。同时，我们还可以根据具体的需求，控制标签建议列表、占位提示文字等参数。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedb695b5cbfe1ea0611583