如何在 NextJS 中添加标签输入？

在本文中，我们将学习如何在 NextJS 中添加标签输入。 NextJS 是一个基于 React 的框架。它有能力为 Windows、Linux 和 mac 等不同平台开发漂亮的 Web 应用程序。

方法：要添加我们的标签输入，我们将使用 react-tag-input-component 包。 react-tag-input-component 包帮助我们将标签输入集成到我们的应用程序中。所以首先，我们将安装 react-tag-input-component 包，然后我们将在我们的主页上添加一个标签输入。

创建 NextJS 应用程序：您可以使用以下命令创建一个新的 NextJs 项目：

npx create-next-app gfg

安装所需的包：现在我们将使用以下命令安装 react-tag-input-component 包：

npm i react-tag-input-component

项目结构：它看起来像这样。

添加标签输入：安装包后，我们可以轻松地在应用程序的任何页面上添加标签输入。对于此示例，我们将向主页添加标签输入。

在index.js文件中添加以下内容：

Javascript

import React, { useState } from "react"; 
import { TagsInput } from "react-tag-input-component"; 
  
export default function TagInput(){
  const [selected, setSelected] = useState(["gfg"]);
  return (
    
      NextJs Tag Input - GeeksforGeeks
      
      Add Tags
      {JSON.stringify(selected)}
      
      Enter tags
      
    
  );
};

说明：在上面的例子中，我们首先从 react 中导入了 TagsInput 组件和 useState 钩子。然后我们使用 useState 挂钩来存储标签的值。之后，我们使用已安装的包添加我们的标签输入。

运行应用程序的步骤：在终端中运行以下命令来运行应用程序。

npm run dev

如何在 NextJS 中添加标签输入？

Javascript

NextJs Tag Input - GeeksforGeeks

Add Tags

输出：