在前端开发中，我们常常需要使用到输入框的自动完成功能。而 react-typeahead-tokenizer 是一个非常好用的 npm 包，能够方便地帮助我们实现这个功能。本篇文章将详细介绍如何安装和使用这个包。
安装 react-typeahead-tokenizer
在使用 react-typeahead-tokenizer 之前，我们需要先安装它。在命令行中输入以下命令即可：
npm install react-typeahead-tokenizer
如果您已经使用了 yarn 包管理器，也可以输入以下命令：
yarn add react-typeahead-tokenizer
使用 react-typeahead-tokenizer
使用 react-typeahead-tokenizer 的第一步是引入它：
import { TypeaheadTokenizer } from "react-typeahead-tokenizer";在您的 React 组件中，您可以使用以下代码来渲染 TypeaheadTokenizer：
<TypeaheadTokenizer
tokens={tokens}
placeholder="请输入内容"
onTokenAdd={handleTokenAdd}
onTokenRemove={handleTokenRemove}
/>上面的代码中，tokens 是一个数组，代表当前输入框中已经有的标签；placeholder 是输入框的文字提示；onTokenAdd 是添加标签时的回调函数；onTokenRemove 是删除标签时的回调函数。
接下来，我们来看一下如何实现 handleTokenAdd 和 handleTokenRemove。这两个函数的参数分别是添加或删除的标签：
const handleTokenAdd = (token) => {
console.log(`添加了标签 ${token}`);
};
const handleTokenRemove = (token) => {
console.log(`删除了标签 ${token}`);
};这样，当您在输入框中添加或删除标签时，就会分别在控制台中输出相应的信息。
最后，我们来看一下 tokens 数组该如何维护。我们可以把它存放在组件的状态中，并通过 setState 将新的标签添加到数组中或者从数组中删除标签。
-- -------------------- ---- ------- ----- -------- ---------- - -------------------- ----- -------------- - ------- -- - --------------------- -------- -- ----- ----------------- - ------- -- - --------------------------- -- - --- -------- --
示例代码
以下是一个完整的例子，可以直接运行并查看效果：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ - ------------------ - ---- ----------------------------
----- --- - -- -- -
----- -------- ---------- - --------------------
----- -------------- - ------- -- -
--------------------- --------
--
----- ----------------- - ------- -- -
--------------------------- -- - --- --------
--
------ -
---- -------- -------- ------ ---
-------------------
---------------
-------------------
---------------------------
---------------------------------
--
------
--
--
------ ------- ----总结
react-typeahead-tokenizer 是一个非常实用的 npm 包，可以帮助我们轻松地实现输入框的自动完成功能。通过本文的介绍，相信您已经了解了如何安装和使用这个包。希望本文对您有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055bff81e8991b448d99f2