@adlk/react-mentions 中文文档教程

Question

React Mentions

一个 React 组件，让您可以像在 Facebook 或推特。

用于 Signavio、State、Snips，Swat.io，GotDone，Volinspire，马文，及时，GuideFitter，Evite，发布者，Kontentino，和你？

Getting started

安装react- mentions 包通过 npm：

npm install react-mentions --save

或 yarn：

yarn add react-mentions

包导出两个 React 组件用于呈现 mentions textarea：

import { MentionsInput, Mention } from 'react-mentions'

MentionsInput 是呈现 textarea 控件的主要组件。 它采用一个或多个 Mention 组件作为其子组件。 每个 Mention 组件代表特定类别的可提及对象的数据源，例如用户、模板变量、问题等。

示例：

<MentionsInput value={this.state.value} onChange={this.handleChange}>
  <Mention
    trigger="@"
    data={this.props.users}
    renderSuggestion={this.renderUserSuggestion}
  />
  <Mention
    trigger="#"
    data={this.requestTag}
    renderSuggestion={this.renderTagSuggestion}
  />
</MentionsInput>

您可以在此处找到更多示例：demo/src/examples

Configuration

MentionsInput 支持以下属性来配置小部件：

Prop name	Type	Default value	Description
value	string	''	The value containing markup for mentions
onChange	function (event, newValue, newPlainTextValue, mentions)	empty function	A callback that is invoked when the user changes the value in the mentions input
singleLine	boolean	false	Renders a single line text input instead of a textarea, if set to true
onBlur	function (event, clickedSuggestion)	empty function	Passes true as second argument if the blur was caused by a mousedown on a suggestion
allowSpaceInQuery	boolean	false	Keep suggestions open even if the user separates keywords with spaces.
suggestionsPortalHost	DOM Element	undefined	Render suggestions into the DOM in the supplied host element.
inputRef	React ref	undefined	Accepts a React ref to forward to the underlying input element
allowSuggestionsAboveCursor	boolean	false	Renders the SuggestionList above the cursor if there is not enough space below

每个数据源使用 Mention 组件进行配置，该组件具有以下属性：

Prop name	Type	Default value	Description
trigger	regexp or string	'@'	Defines the char sequence upon which to trigger querying the data source
data	array or function (search, callback)	null	An array of the mentionable data entries (objects with id & display keys, or a filtering function that returns an array based on a query parameter
renderSuggestion	function (entry, search, highlightedDisplay, index, focused)	null	Allows customizing how mention suggestions are rendered (optional)
markup	string	'@[__display__](__id__)'	A template string for the markup to use for mentions
displayTransform	function (id, display)	returns display	Accepts a function for customizing the string that is displayed for a mention
regex	RegExp	automatically derived from markup pattern	Allows providing a custom regular expression for parsing your markup and extracting the placeholder interpolations (optional)
onAdd	function (id, display)	empty function	Callback invoked when a suggestion has been added (optional)
appendSpaceOnAdd	boolean	false	Append a space when a suggestion has been added (optional)

如果函数作为 data 属性传递，则该函数将通过当前搜索查询调用首先，回调函数作为第二个参数。 回调可用于异步提供结果，例如，在获取请求之后。 （甚至可以多次调用它来更新建议列表。）

Styling

react-mentions 支持 css、css 模块和内联样式。 它仅附带一些基本的内联样式定义，没有任何 CSS。 可以在 demo/src/examples/defaultStyle.js。

如果你想使用 css，只需将 className 属性分配给 MentionsInput。 组件呈现的所有 DOM 节点随后将接收从您提供的基类名称派生的类名称属性。

如果您想避免使用全局类名并改用 css 模块，您可以将自动生成的类名作为 classNames 提供给 MentionsInput。 请参阅 demo/src/examples/CssModules.js使用 react-mentions 和 css 模块的例子。

您还可以将 className 和 style 属性分配给 Mention 元素，以定义如何突出显示提到的词。

Contributing

使用示例页面和模块热加载创建开发服务器：

npm start

更新 Github Pages 上的示例页面：

npm run pages-publish