在前端开发中，有许多常用的 UI 组件库和工具包。其中，@navrin/react-chips 是一个在 React 应用程序中创建交互式芯片（chips）的 npm 包，非常适合开发复杂的表单和用户界面。
安装与使用
使用 npm 安装 @navrin/react-chips：
npm install @navrin/react-chips
然后，将其导入到项目中：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ ---- - ---- ----------------------
-------- --------- -
----- ------- --------- - -------------------
----- -------- - ------ -- -
----- ----- - --------------------
----- -------- - -----------
---------------------- ---
-------------------
--
----- ----- - ------ -- -
------------------- -------
--
------ -
--
------ --------------
----------------- -- -
----- ---------- --------------------
------
-------
---
--------
----------- ------ -------------- -------
---
--
-@navrin/react-chips 提供了两个组件：
Chips组件用于放置和管理芯片；Chip组件表示一个单独的芯片。
Chips 属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| onAdd | function | 必需 | 添加新的芯片时的回调函数 |
| children | node | 必需 | 芯片列表 |
Chip 属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| children | node | 必需 | 芯片的标签内容 |
| onRemove | function | 必需 | 移除芯片时的回调函数 |
| className | string | 自定义类名 | |
| style | object | 自定义样式 | |
| color | string | 芯片背景颜色 | |
| textColor | string | 芯片文本颜色 | |
| icon | element | null | null | 芯片图标 |
示例
以下是一个完整的示例，展示了如何使用 @navrin/react-chips 创建一个带有预填充值和选择器的芯片输入框：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ ---- - ---- ----------------------
-------- --------- -
----- ------- --------- - --------------------------
----- -------- - ------ -- -
----- ----- - --------------------
----- -------- - -----------
---------------------- ---
-------------------
--
----- ----- - ------ -- -
------------------- -------
--
------ -
--
------ --------------
----------------- -- -
----- ---------- --------------------
------
-------
---
--------
----------- ------ -------------- -------
-------
----------------- -- -
--------------------------
-------------------------- - --
--
-
------- ------------ - ---------------
------- --------------------------------------
------- ----------------------------
------- ------------------------
------- --------------------------------
------- --------------------------
------- --------------------------------
---------
---
--
-在这个示例中，我们首先实例化一个 Chips 组件，并使用 map 函数将每个芯片传递给对应的 Chip 组件进行渲染。接着，我们通过 useState 钩子定义了一个 chips 数组来存储选中的芯片。我们还定义了 onAdd 和 onRemove 回调函数来处理添加和移除芯片时的状态更新。
在这个示例中，我们将 <select> 元素用作芯片选择器。该选择器的 onChange 处理程序调用 onAdd 回调函数，并将选择器的当前值传递给它。在事件处理程序完成后，我们将选择器的 selectedIndex 属性设置为 0，以便在下一次添加时将其重置。
结论
@navrin/react-chips 是一个非常有用的 npm 包，它使得创建芯片输入框成为可能。通过本文介绍，你应该已经了解了如何使用它来创建一个可编辑的芯片列表，并使用选择器添加新芯片。我们希望这个教程对你的 React 应用程序开发有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562df81e8991b448e05f4