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

在开发 Web 应用程序时，我们常常需要让用户输入多个标签，例如文章标签、商品标签等等。本文将介绍如何在 Next.js 中添加标签输入。

步骤

1. 安装依赖

npm install react-tag-input --save

2. 导入依赖

我们可以在 Next.js 中的 pages/_app.js 文件中导入 react-tag-input 依赖：

import 'react-tag-input/build/TagInput.css';

3. 创建标签输入组件

我们可以创建一个简单的标签输入组件并将其导出：

import React from 'react';
import TagInput from 'react-tag-input';

const TagInputComponent = ({ tags, handleTagDelete, handleTagAdd }) => {
  return (
    <TagInput
      tags={tags}
      placeholder="Add tags..."
      handleDelete={handleTagDelete}
      handleAddition={handleTagAdd}
      allowDragDrop={false}
    />
  );
};

export default TagInputComponent;

如上所示的标签输入组件取名为 TagInputComponent，它的 props 包括了 tags、handleTagDelete 和 handleTagAdd。接下来我们来分别解释这三个 props 的含义：

• tags：这是一个数组，用于存储现有的标签。
• handleTagDelete：这是一个函数，用于在删除标签时进行回调。
• handleTagAdd：这是一个函数，用于在添加标签时进行回调。

4. 在需要使用标签输入的地方使用标签输入组件

在需要使用标签输入的地方，我们可以直接使用 TagInputComponent 组件，并将其三个 props 到传对应的值：

import React, { useState } from 'react';
import TagInputComponent from '../components/TagInputComponent';

const TagInputPage = () => {
  const [tags, setTags] = useState([]);

  const handleTagDelete = (i) => {
    const newTags = tags.slice(0);
    newTags.splice(i, 1);
    setTags(newTags);
  };

  const handleTagAdd = (tag) => {
    setTags([...tags, tag]);
  };

  return (
    <div>
      <TagInputComponent
        tags={tags}
        handleTagDelete={handleTagDelete}
        handleTagAdd={handleTagAdd}
      />
    </div>
  );
};

export default TagInputPage;

结论

如上所述，我们可以通过安装 react-tag-input 依赖，创建标签输入组件并在需要使用的地方使用它。在 Next.js 中添加标签输入非常简单，你只需要遵循上述步骤即可。