代码拉取完成，页面将自动刷新
/**
* inline: true
*/
import Mentions from 'rc-mentions';
const { Option } = Mentions;
var Demo = (
<Mentions>
<Option value="light">Light</Option>
<Option value="bamboo">Bamboo</Option>
<Option value="cat">Cat</Option>
</Mentions>
);
React.render(<Demo />, container);
| name | description | type | default |
|---|---|---|---|
| autoFocus | Auto get focus when component mounted | boolean |
false |
| defaultValue | Default value | string |
- |
| filterOption | Customize filter option logic | false | (input: string, option: OptionProps) => boolean |
- |
| notFoundContent | Set mentions content when not match | ReactNode |
'Not Found' |
| placement | Set popup placement | 'top' | 'bottom' |
'bottom' |
| direction | Set popup direction | 'ltr' | 'rtl' |
'ltr' |
| prefix | Set trigger prefix keyword | string | string[] |
'@' |
| rows | Set row count | number |
1 |
| split | Set split string before and after selected mention | string |
' ' |
| validateSearch | Customize trigger search logic | (text: string, props: MentionsProps) => void |
- |
| value | Set value of mentions | string |
- |
| onChange | Trigger when value changed | (text: string) => void |
- |
| onKeyDown | Trigger when user hits a key | React.KeyboardEventHandler<HTMLTextAreaElement> |
- |
| onKeyUp | Trigger when user releases a key | React.KeyboardEventHandler<HTMLTextAreaElement> |
- |
| onSelect | Trigger when user select the option | (option: OptionProps, prefix: string) => void |
- |
| onSearch | Trigger when prefix hit | (text: string, prefix: string) => void |
- |
| onFocus | Trigger when mentions get focus | React.FocusEventHandler<HTMLTextAreaElement> |
- |
| onBlur | Trigger when mentions lose focus | React.FocusEventHandler<HTMLTextAreaElement> |
- |
| getPopupContainer | DOM Container for suggestions | () => HTMLElement |
- |
| autoSize | Textarea height autosize feature, can be set to true|false or an object { minRows: 2, maxRows: 6 }
|
boolean | object |
- |
| onPressEnter | The callback function that is triggered when Enter key is pressed | function(e) |
- |
| onResize | The callback function that is triggered when textarea resize | function({ width, height }) |
- |
| name | description |
|---|---|
| focus() | Component get focus |
| blur() | Component lose focus |
npm install
npm start
online example: http://react-component.github.io/mentions/
npm test
npm run coverage
rc-mentions is released under the MIT license.
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
1. 开源生态
2. 协作、人、软件
3. 评估模型