npm 包 react-tag-autocomplete-no-marking 使用教程

介绍

react-tag-autocomplete-no-marking 是一个 React 组件，它可以提供一个标签自动完成的功能，并且不会留下任何标记。使用 react-tag-autocomplete-no-marking，可以方便地实现一个标签输入框，让用户可以输入并选择已有的标签，同时支持自定义标签的样式和行为。

安装

在使用 react-tag-autocomplete-no-marking 前，需要先在项目中安装它。使用 npm 安装命令：

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

使用

在项目中引入 react-tag-autocomplete-no-marking 的方法如下：

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

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

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

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

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

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

属性

在使用 react-tag-autocomplete-no-marking 时，需要配置以下属性：

tags

用来指定已经选择的标签。它是一个数组，数组中的每个元素都是一个 JavaScript 对象，对象中必须包含一个 id 字段和一个 name 字段。例如：

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

suggestions

用来指定建议的标签。它是一个数组，数组中的每个元素都是一个 JavaScript 对象，对象中必须包含一个 id 字段和一个 name 字段。例如：

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

handleDelete

用来处理删除标签的方法。它是一个带有一个参数的函数，参数是待删除的标签的索引。例如：

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

handleAddition

用来处理添加标签的方法。它是一个带有一个参数的函数，参数是待添加的标签。例如：

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

placeholder

用来指定输入框的 placeholder。例如：

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

示例

下面是一个包含三个标签的 react-tag-autocomplete-no-marking 示例代码：

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

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

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

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

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

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

总结

本文介绍了如何使用 react-tag-autocomplete-no-marking 这个 npm 包，并提供了详细的使用方法和示例代码。希望本文能够对前端开发者们有所帮助。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600575c581e8991b448ea73a

阅读全文

猜你喜欢

  • npm 包 f14-l10n 使用教程

    本文将为你介绍一款 npm 包 f14-l10n 的使用教程，帮助你快速构建多语言前端应用程序。同时，我们也会深入探讨这个 npm 包的特点，以及如何使用它来提高团队的开发效率。

    3 年前
  • npm 包 awt 使用教程

    什么是 awt awt 是一个纯 JavaScript 编写的可视化图表库，用于在 Web 界面上绘制多种类型的图表。awt 具有简单易用、高性能、支持多种数据源等特点，并广泛应用于数据可视化领域。

    3 年前
  • npm 包 ofn 使用教程

    在前端开发中，使用 npm 包是非常常见的做法。本文将介绍一个名为 ofn 的 npm 包，它可以帮助你更加高效地处理对象。 ofn 介绍 ofn 是一个 JavaScript 库，它提供了一系列操作...

    3 年前
  • npm 包 cardinal-spline-3d 使用教程

    前言 在前端开发中，难免要处理一些三维图像或曲线，并对其进行平滑处理。而 cardinal-spline-3d 包便是一个方便实用的工具，可以用来处理三维曲线的平滑计算。

    3 年前
  • npm 包 react-native-cascade-picker 使用教程

    前言 在移动端应用中，级联选择器常常是一个常见的 UI 组件。React Native 是一个非常流行的开发框架，它为开发者提供了很多优秀的第三方组件库。其中之一就是 react-native-cas...

    3 年前
  • npm 包 @ssweet/react-tag-autocomplete 使用教程

    在前端开发中，标签（Tag）是一个很重要的概念。不仅可以方便地处理数据，还可以使得内容更加清晰、易于理解。为了方便处理标签组件，我们可以使用 @ssweet/react-tag-autocomplet...

    3 年前
  • npm 包 create-react-app-add-redux 使用教程

    简介 create-react-app-add-redux 是一个用于在 create-react-app 项目中快速添加 Redux 的 npm 包。使用 create-react-app 尤其是新...

    3 年前
  • npm 包 verdaccio-ldap-memcached 使用教程

    在日常的前端开发中，我们常常需要使用 npm 包管理工具，通过它来安装、升级和管理项目中用到的各种依赖包。而 verdaccio-ldap-memcached 是一款优秀的 npm 包，它为我们提供了...

    3 年前
  • npm 包 @programster/my-node-package 使用教程

    在前端开发中，使用 npm 包是常见的操作。@programster/my-node-package 是一个提供了一些常见实用函数以及数据结构的 npm 包。本文将详细介绍该 npm 包的使用方法，并...

    3 年前
  • npm 包 re-respect 使用教程

    前言 前端开发中，我们经常需要验证用户输入的合法性。而 re-respect 提供了一个简单、灵活、可复用的正则表达式表单验证库。本文将详细介绍 re-respect 的使用，以及优化表单验证的技巧。

    3 年前
  • npm 包 redux-standard-reducers 使用教程

    前言 redux-standard-reducers 是一个用于 Redux 应用中创建标准 reducer 的 npm 包。它可以让你更加容易地编写 reducer，并使得 reducer 的代码更...

    3 年前
  • npm包awesome-pretty使用教程

    一、前言 随着前端技术不断发展和深入，我们需要用到的第三方库和工具也越来越多。而npm作为Node.js的包管理工具，为我们提供了方便、可复用的代码，以及更快的开发和部署速度。

    3 年前
  • npm 包 swagger-js-flow 使用教程

    什么是 swagger-js-flow Swagger-js-flow 是一个基于 Swagger 规范创建 JavaScript 对象的库，可以生成文档、客户端代码和服务端代码等。

    3 年前
  • npm 包 webpack-html-plugin-svg-inline 使用教程

    前言 在现代 web 应用开发中，前端技术已经变得非常重要。在前端开发中使用各种工具和库已经成为日常。Webpack 是一个非常流行的前端构建工具，它为我们提供了很多强大的功能。

    3 年前
  • npm 包 react-picker-address 使用教程

    前言 在开发前端应用程序时，有时需要使用到省市区的数据，为了实现这一功能，我们可以使用 react-picker-address 这一 npm 包。它为我们提供了一个快速、简单的省市区选择器，可以用于...

    3 年前
  • npm 包 wysiwyg-jquery 使用教程

    什么是 wysiwyg-jquery wysiwyg-jquery 是一款基于 jQuery 实现的所见即所得编辑器，支持图像、表格和链接等元素的编辑。是前端开发中常用的富文本编辑器之一。

    3 年前
  • npm 包 geokeyboard 使用教程

    在前端开发中，经常需要使用地理位置信息。而 geokeyboard 正是一款能够快速生成地理位置输入框的 npm 包。本文将详细介绍 geokeyboard 的使用方法，为初学者提供指导和帮助。

    3 年前
  • npm 包 hivetaxi-sdk 使用教程

    前言 在前端开发过程中，我们常常需要处理地理位置信息。比如，我们需要根据用户的位置信息来展示特定的地图，或者是根据用户的位置计算出最近的酒店、机场等。而处理地理位置信息，最常用的便是 GPS 技术。

    3 年前
  • npm 包 print-chunks-plugin 使用教程

    简介 print-chunks-plugin 是一个 webpack 插件，用于在编译时输出打包后每个 chunk 的信息，如 chunk 名称、chunk 大小、每个模块的大小等。

    3 年前
  • npm 包 rapid-ztx 使用教程

    随着前端技术的不断发展，现在前端的开发工作越来越复杂。为了提高效率并能够快速构建出高质量的项目，现在出现了很多工具和框架。其中， npm 是前端最常用的包管理工具之一，而 rapid-ztx 就是一个...

    3 年前

相关推荐

    暂无文章