什么是 react-taggy？
react-taggy 是一个用于渲染标记（tags）的 React 组件。它可以方便地构建交互式标记系统，支持自定义样式、事件监听和数据绑定等功能。
安装和使用
使用 npm 安装 react-taggy 很简单：
- --- ------- ----------- ------
安装完成之后，在需要使用 react-taggy 的组件中引入即可：
------ ------ - --------- - ---- --------
------ ----- ---- --------------
----- ----------- ------- --------- -
-------- -
------ -
-----
------
-------------------- -------- -------
------------ ---- -- -- ------------------
--
------
--
-
-上述代码中，我们创建了一个 MyComponent 组件，并在其中使用了 react-taggy。tags 属性指定了要渲染的标记集合，onChange 属性指定了当标记集合发生变化时的回调函数。
自定义样式
react-taggy 支持自定义样式。可以通过 className 属性指定一个自定义的 CSS 类名，或者使用 style 属性直接指定样式规则：
------ -------------- ------ -------------- --------------------------- -------- ---------------- ----------- -- --
上述代码中，我们为 react-taggy 指定了一个自定义的 CSS 类名 my-custom-class，并为其设置了一个背景色为浅灰色。
事件监听
react-taggy 还支持事件监听。可以通过 onAdd 和 onRemove 属性监听标记的添加和移除事件：
------ -------------- ------ -------------- ------------ -- ------------------ ---- --------- --------------- -- -------------------- ---- --------- --
上述代码中，我们分别为 react-taggy 的 onAdd 和 onRemove 属性指定了回调函数，当标记被添加或移除时将分别触发这两个回调函数。
数据绑定
最后，我们来看一下 react-taggy 的数据绑定功能。可以通过将 tags 属性和 onChange 属性绑定到父组件的状态中，从而实现标记的数据双向绑定：
------ ------ - --------- - ---- --------
------ ----- ---- --------------
----- ----------- ------- --------- -
------------------ -
-------------
---------- - - ----- -------- ------ ------------- --
-
------------ - -- ---- -- -- -
--------------- ---- ---
-
-------- -
------ -
-----
------
----------------------
----------------------------
--
----
------------------------ -- --- ----------------------
-----
------
--
-
-上述代码中，我们在父组件 MyComponent 中定义了一个状态变量 tags，并将其作为 react-taggy 的 tags 和 onChange 属性的值进行绑定。每当标记集合发生变化时，都会触发 handleChange 方法从而更新父组件的状态，以及重新渲染标记列表。
总结
通过本文，我们学习了如何使用 react-taggy 渲染标记，以及如何自定义样式、事件监听和数据绑定。react-taggy 的简单易用和灵活性使其成为 React 中一个非常有价值的 npm 包，值得我们进一步尝试和学习。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005597181e8991b448d6f68