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