如何在 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'));

輸出