NPM 包 React-Taggable-Search 使用教程

前言

React 是目前前端界比较热门的框架之一，而它的生态系统也越来越完善。在 React 生态系统中，有很多 npm 包可以帮助我们快速地开发组件。本篇文章将介绍一款非常实用的 React 组件：React-Taggable-Search，它可以帮助我们快速地制作带标签的搜索框。

相关概念

NPM

NPM 全称为 Node Package Manager，它是基于 Node.js 的包管理工具。在 NPM 上可以搜索、安装、上传和卸载各种包，它是前端开发中不可或缺的工具之一。

React

React 是一个由 Facebook 开发的 JavaScript 库，其主要功能是提供了构建 UI 的能力。React 的特点是组件化、声明式编程、高效 DOM 操作等，是现在很多公司的主流前端框架之一。

React-Taggable-Search

React-Taggable-Search 是一个 React 组件，它提供了一个带标签的搜索框，可以搜索自定义的标签。它提供了十分便捷的使用方式和多种自定义选项。

React-Taggable-Search 的使用

安装 React-Taggable-Search

要使用 React-Taggable-Search，首先需要在你的项目中安装它。可以通过以下命令来进行安装：

npm i react-taggable-search

引入 React-Taggable-Search

安装完成后，在需要使用 React-Taggable-Search 的页面中引入它即可。

-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ -------------- ---- ------------------------

-------- ----- -
  ------ -
    -----
      --------------- --
    ------
  --
-

-------------------- --- ---------------------------------

上述代码引入了 React、ReactDOM 和 TaggableSearch，可以在页面上显示带有标签的搜索框。

Props

TaggableSearch 组件有多个可配置选项，可以通过设置对应的 props 来进行自定义配置。以下是可配置的 props 列表。

1. tags: string[]

tags 是一个字符串数组，其中包含所有可用的标签。默认值为空数组。

<TaggableSearch tags={['React', 'Vue', 'Angular']} />

2. placeholder: string

placeholder 是搜索框的占位符文本，可以在 props 中进行设置。默认值为 "Search"。

<TaggableSearch placeholder="请输入搜索内容" />

3. allowNewTags: boolean

allowNewTags 是一个布尔值，表示是否允许用户添加新的标签。默认值为 false。

<TaggableSearch allowNewTags />

4. showSuggestions: boolean

showSuggestions 是一个布尔值，表示是否在搜索框下方渲染可供选择的标签建议。默认值为 true。

<TaggableSearch showSuggestions={false} />

5. maxResults: number

maxResults 表示建议列表中最多显示多少条可选项。默认值为 5。

<TaggableSearch maxResults={10} />

6. onSelectedTagsChange: (newTags: string[]) => void

onSelectedTagsChange 是一个回调函数，它会在用户提交搜索时被调用，返回用户选择的标签数组。

function handleTagsChange(tags) {
  console.log(tags);
}
<TaggableSearch onSelectedTagsChange={handleTagsChange} />

7. onNewTagsAdd: (newTag: string) => void

onNewTagsAdd 是一个回调函数，它会在用户添加新标签时被调用，返回用户输入的标签字符串。

function handleNewTagAdd(tag) {
  console.log(tag);
}
<TaggableSearch allowNewTags onNewTagsAdd={handleNewTagAdd} />

示例代码

下面是一个使用 React-Taggable-Search 的完整示例代码。

-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ -------- ---- ------------
------ -------------- ---- ------------------------

-------- ----- -
  ----- -------------- ---------------- - -------------

  -------- ---------------------- -
    ----------------------
  -

  -------- -------------------- -
    ---------------- --- ---- ---------
  -

  ------ -
    -----
      ---------------
        --------------- ------ -----------
        ---------------------
        ------------
        -----------------------
        ---------------
        ---------------------------------------
        ------------------------------
      --
      ----------- ----- ----------------------------------
    ------
  --
-

-------------------- --- ---------------------------------

总结

React-Taggable-Search 是一个实用、易用的 React 组件，非常适合制作带标签的搜索框。在使用时需根据需要进行自定义选项的设置，可以让搜索过程更符合用户需求。希望本篇文章可以帮助到您。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562a481e8991b448dfe07