前言
在 Web 开发中，我们常常需要实现一些能够 @ 提及他人的功能，如社交网站上的评论回复、电商平台上的产品评价等等。为了方便实现，大多数前端框架都会有相应的插件来实现这个功能，而 rc-editor-mention 就是其中之一。
rc-editor-mention 是一个基于 React 的 @ 提及组件。它可以很方便地与富文本框 editor（如 antd 的 RichText）集成，提供了实时匹配和下拉选择的功能。
在本篇文章中，我们将介绍如何使用 rc-editor-mention，并且详细讲解如何基于它实现一个 @ 提及功能。
安装
使用 npm 安装 rc-editor-mention：
$ npm install rc-editor-mention --save
快速启动
使用 rc-editor-mention 的最简单的方法是直接使用其自带的默认配置进行启动。
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - ------- - ---- --------------------
----- - --------------- ---------------- - - --------
----- --- ------- --------------- -
------------------ -
-------------
---------- - -
------------ ------------------------------------
--
----------------- - -----------------------------
-
------------------------- -
--------------- ----------- ---
-
-------- -
------ -
--------
----------------------------
------------------- ----- ------
----------------------
----------
------------------------------
--
--
-
-
-------------------- --- --------------------------------使用上述代码即可在浏览器上启动 rc-editor-mention，默认会在富文本编辑器内提示用户输入 @XXX。
实现 @ 提及功能
在上述代码中，我们已经能看到 rc-editor-mention 的基本使用方法。下面我们将演示如何基于 rc-editor-mention 实现一个能够 @ 提及他人的功能。
具体而言，我们需要完成以下两个步骤：
- 获取用户输入的已选项，也就是输入框内的 @ 提及信息。
- 将已选项存储到后端数据库中，以便后续查询和展示。
下面我们一步一步地来实现。
获取用户输入的已选项
rc-editor-mention 提供了 onChange 事件，在富文本编辑器内输入内容时会触发该事件。onChange 事件的参数 editorState 包含了当前 editor 中的所有内容，我们可以从中提取出已选项。具体代码如下：
const fromContentState = Mention.fromContentState; const contentState = this.state.editorState; const raw = fromContentState(contentState); const selections = raw.entityMap .filter((entity) => entity.type === 'mention') .map((entity) => entity.data.mention);
上述代码首先使用 fromContentState 方法将当前的 editorState 转化为普通的文本格式。然后，针对每个 mention 类型的实体，我们使用 map 方法将它们的 mention 信息单独抽离出来，最终得到 selections 数组。
储存已选项到后端数据库
储存已选项到后端数据库需要后端支持相应的 API。简单起见，我们这里假设已有一个 /api/mention 接口，用于存储 @ 提及信息。
在前端，我们可以在提交表单时将已选项一并发送给后端，后端再将其存储到数据库中。具体代码如下：
-- -------------------- ---- -------
----- ------------------- -
-----------------------
----- ---------- - ---------------------
----- --------------------- -
------- -------
----- ---------------- ---------- ---
-------- -
--------------- -------------------
--
---
-上述代码中，我们使用 fetch 方法向后端发送请求。其中，POST 请求需要指定 method 为 'POST'，请求头 Content-Type 为 'application/json'，请求体为包含 selections 信息的 JSON 数据。可以看出，使用 rc-editor-mention 实现 @ 提及功能并不复杂，核心的代码也只有几行罢了。
总结
rc-editor-mention 是一个实现 @ 提及功能的优秀 React 组件。在文章中，我们介绍了它的基本用法，并演示了如何基于它实现一个 @ 提及功能。希望本文对读者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/162812