Как добавить ввод тегов в NextJS?

На чтение 3 мин Просмотров 71 Опубликовано 01.01.2022

В этой статье мы узнаем, как добавить ввод тегов в NextJS. NextJS — это фреймворк на основе React. Он позволяет разрабатывать красивые веб-приложения для различных платформ, таких как Windows, Linux и Mac.

Подход: чтобы добавить наш тег input, мы собираемся использовать пакет response-tag-input-component. Пакет response-tag-input-component помогает нам интегрировать ввод тегов в наше приложение. Итак, сначала мы установим пакет response-tag-input-component, а затем добавим тег input на нашу домашнюю страницу.

Создать приложение NextJS: вы можете создать новый проект NextJs, используя следующую команду:

npx create-next-app gfg

Установите требуемый пакет: Теперь мы установим пакет response-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 (

    <div>

      <h1>NextJs Tag Input - GeeksforGeeks</h1>

      <div>

      <h1>Add Tags</h1>

      <pre>{JSON.stringify(selected)}</pre>

      <TagsInput

        value={selected}

        onChange={setSelected}

        name="tags"

        placeHolder="tags"

      />

      <em>Enter tags</em>

      </div>

    </div>

  );

};

Объяснение: В приведенном выше примере сначала мы импортируем компонент TagsInput и обработчик useState из response. Затем мы используем хук useState для хранения значения тега. После этого мы добавляем наши теги input, используя установленный пакет.

Шаги по запуску приложения: Запустите следующую команду в терминале, чтобы запустить приложение.