首页
学习
活动
专区
工具
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.5K30
  • 微信小程序-如何获取用户表单控件中的值

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

    7.2K11

    教你如何快速从 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

    【YashanDB知识库】如何从内存中获取SQL语句的执行计划

    简介目前从PostgreSQL迁移到YashanDB后,需要进行数据校验。下面给出user1模式从PostgreSQL迁移到YashanDB进行数据行数比对的示例。...详情获取PostgreSQL精确行数创建table_count,用于存储行数(建议:使用现有的迁移模式user1,并把table_count创建在user1用户下)create table user1....table_count (owner varchar(200),table_name varchar(200),num_rows int);获取user1模式下的所有表的行数DO $$DECLAREone_row...YashanDB精确行数从PostgreSQL迁移到YashanDB迁移user1模式,迁移完成后可以创建table_count ,用于存储行数(建议:创建新的用户db_yashan,并把table_count...int);获取user1用户下的所有表的行数declarev_owner VARCHAR2(100);v_tabname VARCHAR2(100);stmt VARCHAR2(200);num_rows

    4000

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

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

    75520

    从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 从表中可以看出,预加载显著提升了组件的加载速度,尤其是对于复杂的组件

    50620

    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 框架。 ?

    1.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 的方式,去引用它们。

    49730

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

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

    93010

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

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

    1K20

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

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

    1.1K40

    用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
    领券