@shortcm/chips 是一个快速、易用和高度可定制的轻量化的标签输入框 React 组件。本文将介绍如何使用和配置 @shortcm/chips 组件。
安装
在命令行工具（比如 Terminal 或者终端）中执行以下代码安装 @shortcm/chips npm 包：
npm install @shortcm/chips
使用
只需在 React 项目中导入 @shortcm/chips 组件并使用，如下所示：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ ----- ---- -----------------
-------- ----- -
----- ------- --------- - -------------
----- ------------ - ----- -- ----------------
------ -
------
-------------
-----------------------
--------------------
--
--
-
------ ------- ----如上所示，使用 @shortcm/chips 只需要用 <Chips> 标签在渲染页面即可，其中 value 和 onChange 是必需属性，value 可以用来设置 chips 的默认值，onChange 可以监听 chips 的变化并更新值。
配置
@shortcm/chips 提供了多种配置选项来满足不同使用场景。下面是一些常用的配置选项：
-- -------------------- ---- ------- ------ ------------- ----------------------- -------------------- ----------------- -- ----- ----------------------- -- ------- ------------- -- --------- --- --------------- -- ------------ - -- -- ---------- ------- -- ---------------- -- -- ----- ---------------- -- ---- ---------------------- --------- ---------- -- ------ ------------------------ -- -------------------- -- --------- ------------------ -- -------------------- -- --- ----- -- --
示例代码
以下是一个完整的 @shortcm/chips 示例代码：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ ----- ---- -----------------
-------- ----- -
----- ------- --------- - -------------
----- ------------ - ----- -- ----------------
------ -
------
-------------
-----------------------
--------------------
-------------
---------------------- --------- ----------
------------------------ -- --------------------
------------------ -- --------------------
--
--
-
------ ------- ----以上是 @shortcm/chips 的使用教程，希望本文能帮助您更好地使用这个 npm 包，同时也希望我们的代码能够给您带来一些学习和指导意义。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671a130d0927023822390