在前端开发中，我们经常需要使用输入框以便用户输入数据。而随着用户输入数据的日益复杂，一些特殊的需求也渐渐浮现。例如，我们希望用户能够输入一个 tag，然后按下回车键继续输入下一个 tag，如何实现呢？
这时候我们可以使用 npm 包 react-input-token 来实现这个功能。本文将详细介绍 react-input-token 的使用方法，包括安装、引入、使用示例以及相关 API。
安装
在使用 react-input-token 之前，你需要先安装它。打开终端，进入项目根目录，输入以下命令：
npm install react-input-token --save
安装完成后，你就可以在你的项目中使用 react-input-token 了。
引入
在需要使用 react-input-token 的页面中，你需要引入 react-input-token 常量并调用相应组件。具体代码如下：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ ---------- ---- --------------------
----- ----------- ------- --------- -
-------- -
------ -
-----
----------- --
------
--
-
-
------ ------- ------------使用示例
当你成功引入 react-input-token 后，你就可以开始使用它了。
基本用法
默认情况下，react-input-token 会将用户输入的内容按照空格拆分成多个 tag。示例代码如下：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ ---------- ---- --------------------
----- ----------- ------- --------- -
---------------- - ------ -- -
------------------
-
-------- -
------ -
-----
----------- -------------------------------- --
------
--
-
-
------ ------- ------------自定义分隔符
如果你想要自定义分隔符，只需要在初始化的时候传递一个 tokenSeparator 的 prop 即可。例如，如果你想使用回车作为分隔符，示例代码如下：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ ---------- ---- --------------------
----- ----------- ------- --------- -
---------------- - ------ -- -
------------------
-
-------- -
------ -
-----
----------- ------------------- -------------------------------- --
------
--
-
-
------ ------- ------------显示已选 tag
如果你希望能够显示用户已经选择的 tag，你可以在初始化的时候传递一个 values 的 prop 数组。例如：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ ---------- ---- --------------------
----- ----------- ------- --------- -
---------------- - ------ -- -
------------------
-
-------- -
----- ------ - -------- ------- --------
------ -
-----
----------- --------------- -------------------------------- --
------
--
-
-
------ ------- ------------其他特性
react-input-token 还提供了许多其他的特性，例如：
- 输入时自动完成
- 定制化标签的样式和行为
- 对标签进行编辑和删除等等
这些特性的详细介绍和使用方法可以参见官方文档：https://github.com/mxstbr/react-input-token
API
react-input-token 提供了一些常用的 API，以方便你在使用时进行自定义配置。
onChange
当 tag 发生变化时，将会被触发的回调函数。
<InputToken onChange={handleOnChange} />values
为标签输入框初始化指定值。
<InputToken values={['tag1', 'tag2', 'tag3']} />tokenSeparator
指定 tag 的分隔符，默认为 。
<InputToken tokenSeparator="\n" />
InputProps
设置要传递给 Input 组件的属性。可以传递任何有效的 input 属性，例如去除自动填充或设置 type 为 password 等。
<InputToken InputProps={{ autoComplete: 'off', type: 'password' }} />结语
通过本文的学习，你已经可以使用 npm 包 react-input-token 来实现输入 tag 的功能了。相信在实际开发中，它将会成为你建立高效输入界面的有力工具。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055d8d81e8991b448db4e0