如何在 ReactJS 中添加标签输入框？

---

我们可以通过为输入字段创建一个新的组件并在 NextJS 中使用 onChange 事件处理输入的标签来添加标签输入框。我们还可以使用状态来存储标签并在输入时显示它们。最后，我们可以添加一个按钮或函数来提交最终的标签列表。让我们首先了解什么是 ReactJS 和标签输入框。

ReactJS

React 是一个用于构建用户界面的 JavaScript 库。它使创建交互式 UI 变得容易。为应用程序中的每个状态设计简单的视图，当您的数据发生变化时，React 将有效地更新和渲染正确的组件。您还可以构建封装组件来管理它们自己的状态，然后将它们组合起来以创建复杂的 UI。

ReactJS 可以创建小型和大型、复杂的应用程序。它提供了一组基本但可靠的功能来启动 Web 应用程序。它易于掌握现代和遗留应用程序，并且是更快地编写功能的方法。React 提供了大量现成的组件。

标签输入框

标签输入框是一个 UI 元素，允许用户在输入字段中添加标签或关键词。这些标签通常用于对相关项目进行分类或分组，并且可用于搜索或过滤目的。

标签输入框通常具有一个输入字段，用户可以在其中键入标签，以及一个按钮将标签添加到列表中。然后可以将标签显示为单个元素，通常带有关闭按钮以允许用户删除标签。某些标签输入框还具有自动完成功能，以便在用户键入时建议现有标签。

首先创建一个新的 NextJS 应用程序，并在我们的开发服务器上运行它，如下所示：

npx create-react-app tag-app
cd tag-app
npm start

方法

• 通过在终端中运行以下命令来安装 react-tag-input 库：

npm install react-tag-input

• 通过在文件顶部添加以下行，将库导入到您的组件文件中：

import { TagInput } from 'react-tag-input';

• 创建一个状态变量来保存标签，并将其初始化为空数组：

const [tags, setTags] = useState([]);

• 将 TagInput 组件添加到您的 JSX 代码中，并传入标签状态变量和一个用于处理标签更改的回调函数：

<TagInput tags={tags} onChange={(newTags) => setTags(newTags)} />

• （可选）您还可以通过传入其他 props（如占位符和样式）来自定义 TagInput 组件。例如，要更改输入字段的占位符文本，您可以添加以下 prop：

<TagInput tags={tags} onChange={(newTags) => setTags(newTags)} placeholder="Enter tags here" />

• 根据需要在您的组件逻辑中使用标签状态变量。例如，您可以在列表中显示标签或将它们用作 API 调用的输入：

<ul>
   {tags.map((tag) => <li key={tag}>{tag}</li>)}
</ul>

就是这样！您现在在 ReactJS 项目中拥有了一个功能性的标签输入框。

示例

import React, { useState } from 'react';
import { render } from 'react-dom';
import { COUNTRIES } from './countries';
import './style.css';
import { WithContext as ReactTags } from 'react-tag-input';
const suggestions = COUNTRIES.map((country) => {
   return {
      id: country,
      text: country,
   };
});
const KeyCodes = {
   comma: 188,
   enter: 13,
};
const delimiters = [KeyCodes.comma, KeyCodes.enter];
const App = () => {
   const [tags, setTags] = React.useState([
      { id: 'Thailand', text: 'Thailand' },
      { id: 'India', text: 'India' },
      { id: 'Vietnam', text: 'Vietnam' },
      { id: 'Turkey', text: 'Turkey' },
   ]);
   const handleDelete = (i) => {
   setTags(tags.filter((tag, index) => index !== i));
};
const handleAddition = (tag) => {
   setTags([...tags, tag]);
};
const handleDrag = (tag, currPos, newPos) => {
   const newTags = tags.slice();
   newTags.splice(currPos, 1);
   newTags.splice(newPos, 0, tag);
   // re-render
   setTags(newTags);
};
const handleTagClick = (index) => {
   console.log('The tag at index ' + index + ' was clicked');
};
return (
   <div className="app">
      <h1> React Tags Example </h1>
         <div>
            <ReactTags
               tags={tags}
               suggestions={suggestions}
               delimiters={delimiters}
               handleDelete={handleDelete}
               handleAddition={handleAddition}
               handleDrag={handleDrag}
               handleTagClick={handleTagClick}
               inputFieldPosition="bottom"
               autocomplete
               editable
            />
         </div>
      </div>
   );
};
render(<App />, document.getElementById('root'));

输出