介绍
react-tag-autocomplete-no-marking 是一个 React 组件，它可以提供一个标签自动完成的功能，并且不会留下任何标记。使用 react-tag-autocomplete-no-marking，可以方便地实现一个标签输入框，让用户可以输入并选择已有的标签，同时支持自定义标签的样式和行为。
安装
在使用 react-tag-autocomplete-no-marking 前，需要先在项目中安装它。使用 npm 安装命令：
--- ------- --------------------------------- ------
使用
在项目中引入 react-tag-autocomplete-no-marking 的方法如下：
------ ------ - -------- - ---- --------
------ --------------- ---- ------------------------------------
-------- ----- -
----- ------ -------- - -------------
----- ------------ - --- -- -
----- ------- - -------------
----------------- ---
-----------------
--
----- -------------- - ----- -- -
----- ------- - --------------- -----
-----------------
--
------ -
----------------
-----------
--------------
- --- -- ----- ------------ --
- --- -- ----- ------- --
- --- -- ----- --------- --
- --- -- ----- ----- --
- --- -- ----- ----- --
- --- -- ----- ------ -
--
---------------------------
-------------------------------
----------------- - --- --- ----- ------
--
--
-
------ ------- ----属性
在使用 react-tag-autocomplete-no-marking 时，需要配置以下属性：
tags
用来指定已经选择的标签。它是一个数组，数组中的每个元素都是一个 JavaScript 对象，对象中必须包含一个 id 字段和一个 name 字段。例如：
- - --- -- ----- ------------ -- - --- -- ----- ------- - -
suggestions
用来指定建议的标签。它是一个数组，数组中的每个元素都是一个 JavaScript 对象，对象中必须包含一个 id 字段和一个 name 字段。例如：
- - --- -- ----- ------------ -- - --- -- ----- ------- -- - --- -- ----- --------- -- - --- -- ----- ----- -- - --- -- ----- ----- -- - --- -- ----- ------ - -
handleDelete
用来处理删除标签的方法。它是一个带有一个参数的函数，参数是待删除的标签的索引。例如：
----- ------------ - --- -- - ----- ------- - ------------- ----------------- --- ----------------- --
handleAddition
用来处理添加标签的方法。它是一个带有一个参数的函数，参数是待添加的标签。例如：
----- -------------- - ----- -- - ----- ------- - --------------- ----- ----------------- --
placeholder
用来指定输入框的 placeholder。例如：
---------------- --- ----------------- - --- --- ----- ------ --
示例
下面是一个包含三个标签的 react-tag-autocomplete-no-marking 示例代码：
------ ------ - -------- - ---- --------
------ --------------- ---- ------------------------------------
-------- ----- -
----- ------ -------- - ----------
- --- -- ----- ------------ --
- --- -- ----- ------- --
- --- -- ----- ----- -
---
----- ------------ - --- -- -
----- ------- - -------------
----------------- ---
-----------------
--
----- -------------- - ----- -- -
----- ------- - --------------- -----
-----------------
--
------ -
----------------
-----------
--------------
- --- -- ----- ------------ --
- --- -- ----- ------- --
- --- -- ----- --------- --
- --- -- ----- ----- --
- --- -- ----- ----- --
- --- -- ----- ------ -
--
---------------------------
-------------------------------
----------------- - --- --- ----- ------
--
--
-
------ ------- ----总结
本文介绍了如何使用 react-tag-autocomplete-no-marking 这个 npm 包，并提供了详细的使用方法和示例代码。希望本文能够对前端开发者们有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600575c581e8991b448ea73a