2016-07-04 10:31:27 +08:00
---
category: Components
2016-11-09 14:43:32 +08:00
type: Data Entry
2016-09-08 16:53:50 +08:00
title: Mention
2016-07-04 10:31:27 +08:00
---
2018-03-01 22:08:31 +08:00
Mention component.
2016-07-04 10:31:27 +08:00
## When To Use
When need to mention someone or something.
2016-07-21 15:41:40 +08:00
## API
2016-07-21 15:23:04 +08:00
```jsx
< Mention
onChange={onChange}
suggestions={['afc163', 'benjycui', 'yiminghe', 'jljsj33', 'dqaria', 'RaoHai']}
/>
2016-07-04 10:31:27 +08:00
```
2016-07-20 18:56:44 +08:00
### Mention API
2017-10-25 10:25:44 +08:00
| API | Description | Type |
| --- | ----------- | ---- |
| getMentions | get mentioned people in current contentState | Function(ContentState: contentState): string\[] |
2017-11-30 09:53:32 +08:00
| toContentState | convert string to ContentState | Function(value: string): ContentState |
2017-10-25 10:25:44 +08:00
| toString | convert ContentState to string | Function(contentState: ContentState): string |
2016-07-20 18:56:44 +08:00
2017-06-16 16:56:03 +08:00
### Mention
2016-07-04 10:31:27 +08:00
2017-10-25 10:25:44 +08:00
| Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- |
2017-12-01 19:28:41 +08:00
| autoFocus | get focus when component mounted | boolean | false |
2017-11-30 09:53:32 +08:00
| defaultValue | default value | ContentState, you can use `Mention.toContentState` to convert text to `ContentState` | null |
2018-12-18 19:51:35 +08:00
| defaultSuggestions | default suggestion content | Array< string\|Mention.Nav> | \[] |
2017-10-25 10:25:44 +08:00
| disabled | Tell if the input is disabled. | boolean | false |
| getSuggestionContainer | rendered to the root of the menu. Default rendered to the body dom. If gets any problem of the menu while scrolling. Try to make the root the dom scrolled, and make it position relative. | function | () => document.body |
2016-07-04 10:31:27 +08:00
| loading | loading mode | boolean | false |
| multiLines | multilines mode | boolean | false |
2017-10-25 10:25:44 +08:00
| notFoundContent | suggestion when suggestions empty | string | '无匹配结果,轻敲空格完成输入' |
| placeholder | placeholder of input | string | null |
2017-10-25 10:27:38 +08:00
| placement | The position of the suggestion relative to the target, which can be one of `top` and `bottom` | string | 'bottom'. |
2017-02-13 15:50:38 +08:00
| prefix | character which will trigger Mention to show mention list | string or Array< string > | '@' |
2017-10-25 10:25:44 +08:00
| readOnly | Tell if the input is readonly. | boolean | false |
| suggestions | suggestion content | Array< string\|Mention.Nav> | \[] |
| suggestionStyle | style of suggestion container | object | {} |
2017-05-05 14:53:46 +08:00
| value | core state of mention | ContentState | null |
2017-04-15 14:19:09 +08:00
| onBlur | Callback function called when mention component blur | function(e) | null |
2017-10-25 10:25:44 +08:00
| onChange | Callback function called when content of input changes | function(contentState: ContentState) | null |
2018-12-23 23:13:10 +08:00
| onFocus | Callback function called when mention component get focus | function | null |
2017-10-25 10:25:44 +08:00
| onSearchChange | Callback function called when search content changes | function(value:string, trigger: string) | \[] |
| onSelect | Callback function called when select from suggestions | function(suggestion: string, data?: any) | null |
2016-07-04 10:31:27 +08:00
2017-06-28 16:02:38 +08:00
### Mention methods
2017-12-01 19:28:41 +08:00
| Name | Description |
| ---- | ----------- |
| blur() | remove focus |
2017-12-29 20:22:58 +08:00
| focus() | get focus |
2017-06-28 16:02:38 +08:00
2017-06-16 16:56:03 +08:00
### Nav
2016-07-04 10:31:27 +08:00
2017-10-25 10:25:44 +08:00
| Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- |
2017-01-20 20:10:50 +08:00
| children | suggestion content | object | {} |
2017-10-25 10:25:44 +08:00
| value | value of suggestion, the value will insert into input filed while selected | string | "" |