Создание системы ввода тегов в ReactJS включает несколько шагов. Система ввода тегов позволяет пользователям вводить теги или ключевые слова, обычно разделенные запятыми или пробелами. Вот простой пример того, как можно реализовать систему ввода тегов в ReactJS.

Шаг 1: Настройте свой проект React

Если вы еще не настроили свой проект React, вам необходимо создать его, вставив следующую команду в терминал.

npx create-react-app

Шаг 2: Установите пакет react-tag-input

Откройте терминал внутри вашего проекта и выполните следующую команду, чтобы установить пакет.

npm install react-tag-input

Шаг 3: Создайте компонент InputTag

Теперь внутри корневого каталога вашего проекта создайте файл с именем InputTag.js и вставьте приведенный ниже код.

import  React  from  "react" ; 
import { WithContext  as  ReactTags } from  "react-tag-input" ; 

// Указывает, какие символы должны завершать ввод тегов. Массив кодов символов. 
const  KeyCodes = { 
  comma : 188 , 
  enter : 13 , 
}; 

const delimiters = [ KeyCodes . comma , KeyCodes . enter ]; 

const  InputTag = ( ) => { 
  const [tags, setTags] = React . useState ([]); 

  // Метод для удаления тега из массива 
  const  handleDelete = ( i ) => { 
    setTags (tags. filter ( ( tag, index ) => index !== i)); 
  }; 

  // Метод для добавления тега в массив 
  const  handleAddition = ( tag ) => { 
    setTags ([...tags, tag]); 
  }; 
  return ( 



  ); 
}; 

экспортировать  InputTag по умолчанию  ;
###```**Шаг 4:** Компонент стилизации
Теперь мы стилизуем наш компонент, чтобы сделать его визуально привлекательным. Вставьте код ниже в ваш файл CSS.

теги {

width : 40% ;
margin : 50px auto;
}

теги .ReactTags__tags {

position : relative;
display : flex;
align-items : center;
background-color : #f9f9f9 ;
padding : 5px 10px ;
}

теги .ReactTags__selected {

display : flex;
}

теги .ReactTags__clearAll {

cursor : pointer;
padding : 10px ;
margin : 10px ;
background : #f88d8d ;
color : #fff ;
border : none;
}

теги .ReactTags__tagInput {

border-radius : 2px ;
display : inline-block;
}

теги .ReactTagstagInput input .ReactTagstagInputField , #теги .ReactTagstagInput input .ReactTagstagInputField :focus {

height : 31px ;
margin : 0 ;
font-size : 12px ;
min-width : 150px ;
padding : 0px 10px ;
}

теги .ReactTags__editInput {

border-radius : 1px ;
}

теги .ReactTags__editTagInput {

display : inline-flex;
}

теги .ReactTagsselected span .ReactTagstag {

border : 1px solid #ddd ;
background : #63bcfd ;
color : white;
font-size : 12px ;
display : flex;
padding : 5px ;
margin : 0 5px ;
border-radius : 2px ;
}

теги .ReactTagsselected a .ReactTagsremove {

color: #aaa ;
margin-left : 5px ;
cursor : pointer;
}

tags .ReactTags__suggestions {

position : absolute;
}

tags .ReactTags__suggestions ul {

list-style-type : none;
box-shadow : 0.05em 0.01em 0.5em rgba ( 0 , 0 , 0 , 0.2 );
background : white;
width : 200px ;
}

tags .ReactTags__suggestions li {

border-bottom : 1px solid #ddd ;
padding : 5px 10px ;
margin : 0 ;
}

tags .ReactTags__suggestions li mark {

text-decoration : underline;
background : none;
font-weight : 600 ;
}

теги .ReactTagssuggestions и .ReactTagsactiveSuggestion { фон : #b7cfe0 ; курсор : указатель; } #теги .ReactTags__remove { граница : нет; курсор : указатель; фон : нет; цвет : белый; левое поле : 5 пикселей ; } #теги input { цвет фона : #f9f9f9 ; граница : нет; контур : нет; } #теги input :before { граница : нет; }

```Шаг 5: Интеграция InputTag в приложение

Теперь импортируйте компонент InputTag в файл App.js или требуемый компонент.

импорт  "./App.css" ; 
импорт  InputTag  из  "./InputTag" ; 

function  App ( ) { 
  return ( 



  ); 
} 

export  default  App ;
```Теперь, если мы запустим наше приложение и проверим браузер, мы увидим, что мы создали систему ввода тегов в React JS.
![image](https://miro.medium.com/v2/resize:fit:700/1*-jQm8Rboygu4HwoML6GSeA.gif)
Это базовая реализация системы ввода тегов в ReactJS. Вы можете улучшить ее, добавив такие функции, как валидация, предложения тегов и более продвинутый стиль.