material-react-tag-input 是一款基于 React 和 Material Design 风格的标签输入组件库，可以用于 Web 开发中的表单和搜索功能等场景。本文将详细介绍如何使用 material-react-tag-input。
安装和引入
使用 npm 安装 material-react-tag-input：
npm install material-react-tag-input
在 React 项目中引入 material-react-tag-input：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ---------------------------
-------- ------------- -
------ -
--------- --
--
-
------ ------- ------------基础用法
material-react-tag-input 提供了基本的标签输入功能，包括：
- 输入标签或多个标签
- 删除标签
- 验证标签
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ -------- ---- ---------------------------
-------- ------------ -
----- ------ -------- - -------------
----- --------- - -------- -- -
----------------- ---------
--
----- ------------ - ----- -- -
----------------------- -- - --- ------
--
----- -------------- - ----- -- -
------ ----------------------
--
------ -
---------
-----------
--------------------
--------------------------
------------------------------
--
--
-在上面的例子中，tags 是一个 useState 管理的标签数组。onTagAdd 会在添加新标签时触发，onTagDelete 会在删除标签时触发，onTagValidate 会在验证标签时触发。onTagAdd 和 onTagDelete 会接收一个参数：标签；onTagValidate 会接收一个参数：标签，如果通过验证，返回 true，否则返回 false。
高级用法
material-react-tag-input 还提供了丰富的属性来支持更为复杂的场景，下面是一些常用的高级用法。
定制化标签
可以通过传递一个标签模板来定制化标签展示。
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ -------- ---- ---------------------------
-------- --------------- -
----- ------ -------- - ----------
- --- -- ----- ------------ --
- --- -- ----- ----- --
- --- -- ----- ------ --
---
----- ------------ - ----- -- -
----------------------- -- ---- --- ---------
--
------ -
---------
-----------
--------------------------
------------------ -- -
---- ------------ -------------------
----- ------------------------------------------
-------
---------------------------------
----------- -- ------------------
-
-
---------
------
--
--
--
-在上面的例子中，tagTemplate 是一个函数，接收一个标签对象，返回一个表示标签（会被渲染成一个 HTML 元素）的 React 元素。在返回的元素中可以包含任意数量的子元素和事件处理函数。
禁止添加标签
可以通过 disableInput 属性禁止添加标签：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ -------- ---- ---------------------------
-------- -------------- -
----- ------ -------- - -------------
------ -
---------
-----------
-------------------
--
--
-在上面的例子中，无法添加新标签。
预置标签
可以通过 presetTags 属性预置一些标签，这些标签不能删除：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ -------- ---- ---------------------------
-------- ------------ -
----- ------ -------- - -------------
------ -
---------
-----------
--------------------- ---------- -------
--
--
-在上面的例子中，React、Angular 和 Vue 三个标签是预置的，无法删除，但可以添加新的标签。
总结
本文介绍了 material-react-tag-input 的安装、基础用法和高级用法，希望对您的前端开发工作有所帮助。在开发过程中，可以根据实际需求选择不同的用法，并根据自己的知识和经验进行优化和拓展。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600560d881e8991b448df1c2