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

Как добавить ввод тегов в NextJS Программирование и разработка

В этой статье мы узнаем, как добавить ввод тегов в 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, используя установленный пакет.

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

npm run dev

Вывод:

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

Читайте также:  Как использовать модуль Difflib в Python
Оцените статью
bestprogrammer.ru
Добавить комментарий

Adblock
detector