前言
随着前端开发的发展，UI组件的丰富度也越来越高。在处理一些常见的UI事件时，常常需要用到一些常用的库来协助开发。在此，我们将介绍一个非常实用的 React 组件库——React Mentions，该组件库可帮助我们快速地将 mention 功能集成到项目中。下面将简单介绍该组件库的使用方法。
什么是React Mentions
React Mentions 是一个非常流行的 mention 组件库。与负责人 Matti 的一份记录相比，“Mentions” 是一种让<textarea>中的用户输入可以以某种特殊方式与其他实体（“@”和“#”后）交互的UI体验。例如：
使用@符号来提到指定用户是有用的，例如：
- 社交媒体页面上的评论
- 输入电子邮件地址时提醒收件人
React Mentions 可以帮助我们创建出这种UI体验。该组件库提供了对输入区域的完全控制，同时也可以很容易地处理对API端点的调用。本文将演示如何安装和使用 React Mentions。
React Mentions 的安装和使用
安装
我们可以通过 NPM 或 Yarn 安装React Mentions
npm i @brigad/react-mentions // or yarn add @brigad/react-mentions
使用
使用 React Mentions 一般分为以下三个步骤：
1.导入相关 JS/CSS 文件
2.渲染 mentions 组件
3.处理 mentions 事件
我们在这里简单概述一下这三个步骤。
导入相关 JS/CSS 文件
这里我们使用 react 和 react-dom 展示 mentions 组件，并引入 mdi-icons 和 theme CSS 文件：
import React, { useState } from "react";
import ReactDOM from "react-dom";
import MentionsInput from "@brigade/react-mentions";
import { mdiAccountCircle } from "@mdi/js";
import "@brigade/react-mentions/lib/css/react-mentions.css";
import "./styles.css";渲染 mentions 组件
我们创建一个基本的展示评论、提及用户信息的 react demo。可以像下面这样创建一个 <MentionsInput>组件。组件要求至少两个参数： value 和 onChanges。我们需要将值和数据请求进度相结合，以保证用户输入的时间和数据请求相互独立：
-- -------------------- ---- -------
-------- ----- -
----- ------ -------- - -------------
----- ------- --------- - -------------
----- ------------ - ----- -- -
----- - ------ -------- - - -------------
-------------------
--
----- ----------- - --------- -- -
---------------------------------------------- - ------------------- --
-------------------- -- -
--------------------------- -- -- -------- ----------- --- ------- ----
--
--
--
------ -
---- ----------------------
--------------
-------------
--------------------
-----------------------
------------------------
-----------
------------------------- -- --------------
-------------------------
----------- --
------
--
-
----- ----------- - --------------------------------
-------------------- --- -------------处理 mentions 事件
在该 demo 中，当用户点击账户名时，我们需要获取该选项的相关信息。 这里 onAdd 事件将帮助我们完成这个任务，并将所需信息传递给应用程序：
-- -------------------- ---- -------
----- ----- - ---- -------- -- -
---------------- ------- -- - -- - --- ------- ---
--
--------------
---
-------------
------------------------------ ------- --
---- -------------------------
- ---------------- ------------------------ --
---- ------------------------------------------------
------
-
--在这里，我们将 renderSuggestion 视为自定义UI，这里我们为其提供了一个简单的样式。
一个完整的示例代码可以在我的GitHub 仓库中找到。
总结
React Mentions 是一款非常实用易用的库，它可以让我们轻松地实现 mention 功能。我们可以使用该库帮助用户在输入时搜索信息，同时保证数据量不会太大。通过代码，我们展示了 React Mentions 的实际工作原理和应用场景。这将帮助初学者学习和理解 React Mentions 的使用方式。当然，自己实践将是更好地理解 React Mentions 的关键。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005638181e8991b448e1117