首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何从react draft-js-提及-plugin中获取提到的用户?

从react draft-js-提及-plugin中获取提到的用户,可以通过以下步骤实现:

  1. 首先,确保已经安装了react draft-js-提及-plugin插件,并在项目中引入该插件。
  2. 在使用该插件的组件中,创建一个状态变量来存储提到的用户列表。例如,可以使用useState钩子函数创建一个名为mentionedUsers的状态变量。
  3. 在组件的render方法中,使用Draft.js的Editor组件来渲染编辑器。将react draft-js-提及-plugin作为Editor组件的插件传入。
  4. 在Editor组件的props中,使用mention插件的mentionSuggestionsProps属性来配置提到用户的相关设置。其中,mentionSuggestionsProps的onSearchChange属性可以用来监听用户输入的变化,并根据输入内容从后端获取匹配的用户列表。
  5. 在onSearchChange的回调函数中,可以通过发送异步请求或者调用本地数据来获取匹配的用户列表。将获取到的用户列表更新到mentionedUsers状态变量中。
  6. 在mentionSuggestionsProps的suggestions属性中,将mentionedUsers状态变量作为提到用户的列表传入。
  7. 最后,在Editor组件中使用mention插件的MentionSuggestions组件来展示提到用户的列表。将MentionSuggestions组件作为Editor组件的子组件,并将mentionedUsers状态变量作为props传入。

通过以上步骤,就可以从react draft-js-提及-plugin中获取提到的用户。在用户输入时,插件会根据输入内容从后端获取匹配的用户列表,并展示在编辑器中供用户选择。用户选择的提到用户会被存储在mentionedUsers状态变量中,可以进一步处理或展示。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

如何React 获取点击元素 ID?

React 应用,我们经常需要根据用户点击事件来执行相应操作。在某些情况下,我们需要获取用户点击元素唯一标识符(ID),以便进行进一步处理。...本文将详细介绍如何React 获取点击元素 ID,并提供示例代码帮助你理解和应用这个功能。使用事件处理函数在 React ,我们可以使用事件处理函数来获取点击元素信息。...示例代码下面是一个示例代码,演示了如何使用事件处理函数来获取点击元素 ID:import React from 'react';const ClickElement = () => { const...示例代码以下是一个示例代码,演示了如何使用 ref 来获取点击元素 ID:import React, { useRef } from 'react';const ClickElement = () =...结论本文详细介绍了在 React 获取点击元素 ID 两种方法:使用事件处理函数和使用 ref。

3.4K30
  • 微信小程序-如何获取用户表单控件

    背景 在小程序开发,经常有用到表单,我们往往需要在小程序端获取用户表单输入框值(通常用户输入有:switch,input,checkbox,slider,radio,picker)等,通过触发事件...,然后提交给后端处理 那么在小程序当中有哪些方式可以获取到表单值呢,又怎么通过非表单提交方式获取用户输入框值呢 换言之,若提交按钮在form之外,又如何实现表单提交呢 在小程序中有两种方式可以获取表单值...form 表单获取表单组件值 这是最普遍通用一种方法,所有用户输入组件放置在form内,当点击form表单form-type为submitbutton组件时 它会将表单组件value值进行提交...,当然也不是说非得包裹,那只能使用第二种方法获取控件值 其中表单switch,radio,checkboxchecked并不是必须,可以填写一个默认初始值,进行控制,在本文示例,我是给了一个初始值...,同样也可以获取到表单组件各个数值 这种应用场景在小程序是很常见,表单提交数据,不一定就非得是button按钮方式,只要能拿到表单组件值,就达到目的了 非表单方式获取表单组件值 下面是实例效果

    7K11

    教你如何快速 Oracle 官方文档获取需要知识

    https://docs.oracle.com/en/database/oracle/oracle-database/index.html 如图,以上 7.3.4 到 20c 官方文档均可在线查看...11G 官方文档:https://docs.oracle.com/cd/E11882_01/server.112/e40402/toc.htm 这里以 11g R2 官方文档为例: 今天来说说怎么快速官方文档得到自己需要知识...SQL language Reference ,这个文档包括 Oracle数据库SQL 语句语法( plsql不包含在内)。比如说create table语法、函数、表达式都在这里有描述。...有监听相关疑问可以在这个文档中找到答案。 Backup and Recovery User’s Guide ,文档描述了 rman 各种用法。...具体还没深入了解,但是感觉还是比较先进好用,当 plsql没有办法完成任务时候,可以使用 java存储过程来解决,比如说想要获取主机目录下文件列表。

    7.9K00

    如何使用插件化机制优雅封装你请求hook

    本文是深入浅出 ahooks 源码系列文章第二篇,这个系列目标主要有以下几点: 加深对 React hooks 理解。 学习如何抽象自定义 hooks。...,如果让你来实现,你会如何实现?...[]); } export default useRequest; 这里第一(service 请求实例)第二个参数(配置选项),我们比较熟悉,第三个参数文档没有提及...上文有提到所有的插件运行结果都赋值给 pluginImpls。...一个请求开始到结束,如下图所示: 如果你比较仔细,你会发现基本所有的插件功能都是在一个请求一个或者多个阶段实现,也就是说我们只需要在请求相应阶段,执行我们插件逻辑,就能完成我们插件功能

    74020

    0到1开发一个简单 eslint 插件

    提及babel配置present和plugin 比如你使用extends去扩展 { "extends": [ "eslint:recommended", "plugin:react.../recommended", "eslint-config-standard", ]} 但是如果你想用插件,其实等价于 {"plugin": ['react','standard']} ⏰ 提醒.../recommended 会自动加载上叙提到其他几个配置信息 2 开发eslint插件 通过上一节对eslint配置了解,接下来看看如何0到1开发一个eslint插件。...啊宽同学:那我如何定义一个包含配置集合呢? 是的,官方文档描述:你可以在一个插件在 configs 键下指定打包配置。...发布 npm pulish 更多了解npm发布,可以阅读树酱0到1开发工具库 - npm发布 这里不重复介绍 2.6 如何使用 通过第一节配置介绍,我们需要有个.eslintrc文件,如果目录没用可以通过命令行

    1.1K20

    如何用扫描仪控制恶意程序,隔离网络获取数据(含攻击演示视频)

    近期,一群来自以色列安全研究专家发明了一种能够物理隔离网络窃取数据新技术。研究人员表示,他们可以通过扫描仪来控制目标主机恶意软件,然后从这台物理隔离网络计算机提取出目标数据。...研究人员在他们发表研究报告说到: “攻击者首先需要向一台平板扫描仪发送光脉冲信号,当平板扫描仪接收到了这些信号之后,目标主机恶意软件会将信号携带控制命令提取出来。...在真实攻击场景,攻击者甚至还可以利用一架配备了激光枪无人机(办公室窗户外向扫描仪发射光信号)来发动攻击。...这也就意味着,一个64位消息块则需要大约3秒钟时间,而恶意软件可以实时读取光信号携带数据。 在研究人员所进行另一项测试,他们通过这项技术发动了一次勒索攻击。...当时,他们身处一台停在停车场汽车,并在车内通过光脉冲信号加密了目标主机数据。

    5.3K90

    webpack基础入门

    在webpack配置Babel方法如下: module.exports = { entry: __dirname + "/app/main.js",//已多次提及唯一入口文件 output...html-webpack-plugin'); module.exports = { entry: __dirname + "/app/main.js",//已多次提及唯一入口文件 output...,需要对模块进行额外配额; Babel有一个叫做react-transform-hrm插件,可以在不对React模块进行额外配置前提下让HMR正常工作; 还是继续上例来实际看看如何配置 const...('extract-text-webpack-plugin'); module.exports = { entry: __dirname + "/app/main.js",//已多次提及唯一入口文件...安装: cnpm install clean-webpack-plugin --save-dev 使用: 引入clean-webpack-plugin插件后在配置文件plugins做相应配置即可:

    1.5K20

    首屏体验提升之不一样代码拆分+预加载实现应用性能及体验兼得

    我们看一些针对《如何提升应用首屏加载体验》文章,提到必不可少措施,便是减少首屏幕加载资源大小,而减少资源大小必然会想到按需加载措施。...本文提到便是一个基于webpack 插件[1]与 react 组件[2]实现一套研发高度自定义、组件按需加载资源预加载方案....,甚至是页面白屏情况,这对用户而言是不能接受用户体验。...那么我们在 webpack 编译层面是可以获取到打包chunk详细信息,是不是可以在 plugin 层面对按需加载chunk进行统一维护,同时减少侵入式代码,于是便有了此方案 route-resource-preload...(ms) 预加载 (ms) 普通组件 (单个资源文件) 184 1 Module-Federation 组件 (6 个资源文件) 405 8 可以看出,预加载显著提升了组件加载速度,尤其是对于复杂组件

    44120

    iOS 开发者 Weex 伪最佳实践指北

    Weex出生那天起,就被给予了一统三端厚望。React Native可以支持iOS、Android,而Weex可以支持iOS、Android、HTML5。...再说说如何Debug,这块使用是weex-devtool。 ? 这个工具和前端在Chrome里面调试体验基本相同。 ?...add plugin_name复制代码 你只需要输入插件名称就可以远程添加插件到你本地项目,比如添加 weex-chart,我们可以输入命令: $ weex plugin add weex-chart...曾经我幻想着能实时在线更新,就是线上一发布,所有用户在联网情况下,下发HotPatch完毕以后直接加载,联网用户可以实现秒级别的热更新。这种虽然可以做到,但是意义不大。...在《淘宝双促 Rax》这篇文章里面介绍了Rax: Rax 是一个基于 React 方式跨容器 JS 框架。 ?

    1K10

    转 入门Webpack,看这篇就够了

    通过配置文件来使用Webpack Webpack拥有很多其它比较高级功能(比如说本文后面会介绍loaders和plugins),这些功能其实都可以通过命令行模式实现,但是正如前面提到,这样不太方便且容易出错...在webpack配置Babel方法如下: module.exports = { entry: __dirname + "/app/main.js",//已多次提及唯一入口文件 output...html-webpack-plugin'); module.exports = { entry: __dirname + "/app/main.js",//已多次提及唯一入口文件 output...,需要对模块进行额外配额; Babel有一个叫做react-transform-hrm插件,可以在不对React模块进行额外配置前提下让HMR正常工作; 还是继续上例来实际看看如何配置 const...npm install --save-dev babel-plugin-react-transform react-transform-hmr 配置Babel // .babelrc { "presets

    1.7K101

    每日前端夜话(0x05):2018年JavaScript状态调查(下)

    比率较高国家和地区显示为红色,较低国家/地区显示为蓝色(调查受访者总数少于20国家和地区将被省略)。 ? 其它 调查受访者提到其他答案,按提及计数排名。 ?...作为React Native替代方案,如果不想用React模式,在JavaScript编写跨平台应用开发者可以关注Weex,这可以让他们使用Vue.js生态系统。...Storybook 79.6% Electron 77.5% 提到最多 在“其他库”选项获得答案最多。 ?...VueX 共有719个调查问卷提及VueX,使其成为迄今为止提交最多开放式答案。 Cypress 382 Hapi 349 最常被使用 获得最大用户技术。 ?...尽管目前来说,前端还算是风平浪静,但是客户端如何数据库获取数据问题还远远未能解决,GraphQL肯定会开始在该领域制造越来越大波浪。

    2.2K40

    谈谈React事件机制和未来(react-events)

    基本概念 整体架构 事件分类与优先级 实现细节 事件是如何绑定? 事件是如何分发? 事件触发调度 插件是如何处理事件?...不同类型事件有不同优先级,比如高优先级事件可以中断渲染,让用户代码可以及时响应用户交互。 Ok, 后面我们会深入了解React事件实现,我会尽量不贴代码,用流程图说话。...事件是如何绑定? 为了避免后面绕晕了,有必要先了解一下React事件机制插件协议。...dispatchEvent函数. dispatchEvent中会DOM原生事件对象获取事件触发target,再根据这个target获取关联React节点实例. export function dispatchEvent...3️⃣ 根据DOM事件传播顺序获取用户事件处理器列表 为了避免频繁创建和释放事件对象导致性能损耗(对象创建和垃圾回收),React使用一个事件池来负责管理事件对象,使用完事件对象会放回池中,以备后续复用

    2.3K40

    Webpack优化——将你构建效率提速翻倍

    不过在正文开始之前,首先需要提前说明一点,本次文章介绍构建效率提升手段是基于 webpack4 进行,对于使用老版本项目,如何老版本升级到 webpack4 流程我就不做过多介绍了,因为不论是掘金还是各种论坛上你都能搜到太多优质文章了...,所以对于大部分基础知识,比如 webpack-dev-server 相关配置,还有一些常见 plugin,在本文就不会较多提及。...就是此类)共存,因此,在你需要打点之前,如果存在这类 Plugin,请先移除,否则会产生如我这篇 issue 所提到问题。...因此,我们会设法将这些静态依赖每一次构建逻辑抽离出去,以提升我们每次构建构建效率。...Externals方式,我们将这些不需要打包静态资源构建逻辑剔除出去,而使用 CDN 方式,去引用它们。

    92610

    Webpack优化——将你构建效率提速翻倍

    不过在正文开始之前,首先需要提前说明一点,本次文章介绍构建效率提升手段是基于 webpack4 进行,对于使用老版本项目,如何老版本升级到 webpack4 流程我就不做过多介绍了,因为不论是掘金还是各种论坛上你都能搜到太多优质文章了...,所以对于大部分基础知识,比如 webpack-dev-server 相关配置,还有一些常见 plugin,在本文就不会较多提及。...就是此类)共存,因此,在你需要打点之前,如果存在这类 Plugin,请先移除,否则会产生如我这篇 issue 所提到问题。...因此,我们会设法将这些静态依赖每一次构建逻辑抽离出去,以提升我们每次构建构建效率。...Externals方式,我们将这些不需要打包静态资源构建逻辑剔除出去,而使用 CDN 方式,去引用它们。

    49430

    【Webpack】418- 深度优化 Webpack 性能,翻倍构建性能

    不过在正文开始之前,首先需要提前说明一点,本次文章介绍构建效率提升手段是基于 webpack4 进行,对于使用老版本项目,如何老版本升级到 webpack4 流程我就不做过多介绍了,因为不论是掘金还是各种论坛上你都能搜到太多优质文章了...,所以对于大部分基础知识,比如 webpack-dev-server 相关配置,还有一些常见 plugin,在本文就不会较多提及。...就是此类)共存,因此,在你需要打点之前,如果存在这类 Plugin,请先移除,否则会产生如我这篇 issue 所提到问题。...因此,我们会设法将这些静态依赖每一次构建逻辑抽离出去,以提升我们每次构建构建效率。...Externals方式,我们将这些不需要打包静态资源构建逻辑剔除出去,而使用 CDN 方式,去引用它们。

    1.1K40

    50天用react.js重写50个web项目,我学到了什么?

    该方法接收2个参数,第一个参数则是我们react状态,它可以是一个函数,也可以是一个对象。第二个参数则是一个回调函数。谈到这里,可能就会提到一个问题,那就是setState到底是异步还是同步?...答案如下: 答:reactsetState在合成事件和钩子函数是"异步",而在原生事件和setTimeout则是同步。...事实上,我们可以通过制定第二个参数即callback(回调函数)来获取到更新后值。...react.js如何更新数组某一项?在这里我是更新整个数组,或许这不是一种好方式。也希望有大佬能提供思路。...合成事件对象读取原生事件对象。即nativeEvent属性。 30. auto-text-effect 效果如图所示: 30.png 源码 在线示例 学到了什么?

    1K20

    用TypeScript编写React最佳实践

    不要担心,本文我们来总结一下两者结合使用最佳实践。 React 和 TypeScript 如何一起使用 在开始之前,让我们回顾一下 React 和 TypeScript 是如何一起工作。...React 是一个 “用于构建用户界面的 JavaScript 库” ,而 TypeScript 是一个 “可编译为普通 JavaScript JavaScript类型化超集” 。...一个经常被提到常见问题是 TypeScript 是否编译你 React 代码。TypeScript 工作原理类似于下面的方式: TS:“嘿,这是你所有的UI代码吗?” React:“是的!”...Props 有时,您希望获取为一个组件声明 Props,并对它们进行扩展,以便在另一个组件上使用它们。...还记得我们如何看待两种类型组件 Props、type 或 interfaces 方法吗?取决于你使用组件决定了你如何扩展组件 Props 。

    4.7K51

    【译】使用 Webpack 和 Poi 构建更好 JavaScript 应用

    这使得你可以在源码中使用 require() 来引用本地文件并且决定在最终 JavaScript 包如何处理这些本地文件代码。 Poi 是一个零配置基于 Webpack 打包器。...使用 Poi 定制 HTML 模板 尽管 Poi 为我们应用提供了现成 HTML 模板,我们仍然可以按照自己喜欢定制它。下面将展示如何使用 Poi 定制 HTML 页面 head 标签。.../App.vue'; new Vue ({ el: "#app", render: h => h(App), }); 上面的代码片段,我们 App.vue 文件引入了 App 组件,然后创建了...$ yarn add babel-preset-react-app babel-plugin-react-require -D 然后创建名为 .babelrc 文件,内容如下: { "presets...我们可以通过这个例子来看看如何手动添加 Webpack loader。 在项目目录下创建名为 page.md 新文件并在该文件随意书写 markdown 格式内容。

    1.3K40
    领券