介绍
react-tag-autocomplete-no-marking 是一个 React 组件，它可以提供一个标签自动完成的功能，并且不会留下任何标记。使用 react-tag-autocomplete-no-marking，可以方便地实现一个标签输入框，让用户可以输入并选择已有的标签，同时支持自定义标签的样式和行为。
安装
在使用 react-tag-autocomplete-no-marking 前，需要先在项目中安装它。使用 npm 安装命令：
npm install react-tag-autocomplete-no-marking --save
使用
在项目中引入 react-tag-autocomplete-no-marking 的方法如下：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ --------------- ---- ------------------------------------
-------- ----- -
----- ------ -------- - -------------
----- ------------ - --- -- -
----- ------- - -------------
----------------- ---
-----------------
--
----- -------------- - ----- -- -
----- ------- - --------------- -----
-----------------
--
------ -
----------------
-----------
--------------
- --- -- ----- ------------ --
- --- -- ----- ------- --
- --- -- ----- --------- --
- --- -- ----- ----- --
- --- -- ----- ----- --
- --- -- ----- ------ -
--
---------------------------
-------------------------------
----------------- - --- --- ----- ------
--
--
-
------ ------- ----属性
在使用 react-tag-autocomplete-no-marking 时，需要配置以下属性：
tags
用来指定已经选择的标签。它是一个数组，数组中的每个元素都是一个 JavaScript 对象，对象中必须包含一个 id 字段和一个 name 字段。例如：
[
{ id: 1, name: 'JavaScript' },
{ id: 2, name: 'React' }
]suggestions
用来指定建议的标签。它是一个数组，数组中的每个元素都是一个 JavaScript 对象，对象中必须包含一个 id 字段和一个 name 字段。例如：
[
{ id: 1, name: 'JavaScript' },
{ id: 2, name: 'React' },
{ id: 3, name: 'Angular' },
{ id: 4, name: 'Vue' },
{ id: 5, name: 'CSS' },
{ id: 6, name: 'HTML' }
]handleDelete
用来处理删除标签的方法。它是一个带有一个参数的函数，参数是待删除的标签的索引。例如：
const handleDelete = (i) => {
const newTags = tags.slice();
newTags.splice(i, 1);
setTags(newTags);
};handleAddition
用来处理添加标签的方法。它是一个带有一个参数的函数，参数是待添加的标签。例如：
const handleAddition = (tag) => {
const newTags = [].concat(tags, tag);
setTags(newTags);
};placeholder
用来指定输入框的 placeholder。例如：
<TagAutocomplete ... placeholder="Type a tag and press enter" />
示例
下面是一个包含三个标签的 react-tag-autocomplete-no-marking 示例代码：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ --------------- ---- ------------------------------------
-------- ----- -
----- ------ -------- - ----------
- --- -- ----- ------------ --
- --- -- ----- ------- --
- --- -- ----- ----- -
---
----- ------------ - --- -- -
----- ------- - -------------
----------------- ---
-----------------
--
----- -------------- - ----- -- -
----- ------- - --------------- -----
-----------------
--
------ -
----------------
-----------
--------------
- --- -- ----- ------------ --
- --- -- ----- ------- --
- --- -- ----- --------- --
- --- -- ----- ----- --
- --- -- ----- ----- --
- --- -- ----- ------ -
--
---------------------------
-------------------------------
----------------- - --- --- ----- ------
--
--
-
------ ------- ----总结
本文介绍了如何使用 react-tag-autocomplete-no-marking 这个 npm 包，并提供了详细的使用方法和示例代码。希望本文能够对前端开发者们有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600575c581e8991b448ea73a