• Mention提及
    • 何时使用
    • 代码演示
    • API
      • Mention API
      • Mention
      • Mention 方法
      • Nav

    Mention提及

    提及组件。

    何时使用

    用于在输入中提及某人或某事，常用于发布、聊天或评论功能。

    代码演示

    Mention 提及 - 图1

    基本使用

    基本使用

    1. import { Mention } from 'antd';
    3. const { toString, toContentState } = Mention;
    5. function onChange(contentState) {
    6.   console.log(toString(contentState));
    7. }
    9. function onSelect(suggestion) {
    10.   console.log('onSelect', suggestion);
    11. }
    13. ReactDOM.render(
    14.   <Mention
    15.     style={{ width: '100%' }}
    16.     onChange={onChange}
    17.     defaultValue={toContentState('@afc163')}
    18.     defaultSuggestions={['afc163', 'benjycui', 'yiminghe', 'RaoHai', '中文', 'にほんご']}
    19.     onSelect={onSelect}
    20.   />,
    21.   mountNode,
    22. );

    Mention 提及 - 图2

    异步加载

    匹配内容列表为异步返回时。

    1. import { Mention } from 'antd';
    3. const users = ['afc163', 'benjycui', 'yiminghe', 'jljsj33', 'dqaria', 'RaoHai'];
    5. class AsyncMention extends React.Component {
    6.   state = {
    7.     suggestions: [],
    8.     loading: false,
    9.   };
    11.   fetchSuggestions = (value, callback) => {
    12.     setTimeout(() => {
    13.       callback(users.filter(item => item.indexOf(value) !== -1));
    14.     }, 500);
    15.   };
    17.   onSearchChange = value => {
    18.     this.fetchSuggestions(value, suggestions => {
    19.       this.setState({
    20.         suggestions,
    21.         loading: false,
    22.       });
    23.     });
    24.     this.setState({
    25.       loading: true,
    26.     });
    27.   };
    29.   render() {
    30.     const { suggestions, loading } = this.state;
    31.     return (
    32.       <Mention
    33.         style={{ width: '100%' }}
    34.         loading={loading}
    35.         suggestions={suggestions}
    36.         onSearchChange={this.onSearchChange}
    37.       />
    38.     );
    39.   }
    40. }
    42. ReactDOM.render(<AsyncMention />, mountNode);

    Mention 提及 - 图3

    头像

    自定义建议（含头像）

    注意，自定义建议时，onSearchChange 必须不能为空。

    1. import { Mention, Avatar } from 'antd';
    3. const Nav = Mention.Nav;
    5. const webFrameworks = [
    6.   {
    7.     name: 'React',
    8.     type: 'JavaScript',
    9.     icon: 'https://zos.alipayobjects.com/rmsportal/LFIeMPzdLcLnEUe.svg',
    10.   },
    11.   {
    12.     name: 'Angular',
    13.     type: 'JavaScript',
    14.     icon: 'https://zos.alipayobjects.com/rmsportal/PJTbxSvzYWjDZnJ.png',
    15.   },
    16.   {
    17.     name: 'Dva',
    18.     type: 'Javascript',
    19.     icon: 'https://zos.alipayobjects.com/rmsportal/EYPwSeEJKxDtVxI.png',
    20.   },
    21.   {
    22.     name: 'Flask',
    23.     type: 'Python',
    24.     icon: 'https://zos.alipayobjects.com/rmsportal/xaypBUijfnpAlXE.png',
    25.   },
    26. ];
    28. class CustomNavMention extends React.Component {
    29.   state = {
    30.     suggestions: [],
    31.   };
    33.   onSearchChange = value => {
    34.     const searchValue = value.toLowerCase();
    35.     const filtered = webFrameworks.filter(
    36.       item => item.name.toLowerCase().indexOf(searchValue) !== -1,
    37.     );
    38.     const suggestions = filtered.map(suggestion => (
    39.       <Nav value={suggestion.name} data={suggestion} disabled={suggestion.disabled}>
    40.         <Avatar
    41.           src={suggestion.icon}
    42.           size="small"
    43.           style={{
    44.             width: 14,
    45.             height: 14,
    46.             marginRight: 8,
    47.             top: -1,
    48.             position: 'relative',
    49.           }}
    50.         />
    51.         {suggestion.name} - {suggestion.type}
    52.       </Nav>
    53.     ));
    54.     this.setState({ suggestions });
    55.   };
    57.   render() {
    58.     const { suggestions } = this.state;
    59.     return (
    60.       <Mention
    61.         style={{ width: '100%' }}
    62.         suggestions={suggestions}
    63.         onSearchChange={this.onSearchChange}
    64.       />
    65.     );
    66.   }
    67. }
    69. ReactDOM.render(<CustomNavMention />, mountNode);

    Mention 提及 - 图4

    配合 Form 使用

    受控模式，例如配合 Form 使用。

    1. import { Mention, Form, Button } from 'antd';
    3. const { toContentState, getMentions } = Mention;
    4. const FormItem = Form.Item;
    6. class App extends React.Component {
    7.   state = {
    8.     initValue: toContentState('@afc163'),
    9.   };
    11.   handleReset = e => {
    12.     e.preventDefault();
    13.     this.props.form.resetFields();
    14.   };
    16.   handleSubmit = e => {
    17.     e.preventDefault();
    18.     this.props.form.validateFields((errors, values) => {
    19.       if (errors) {
    20.         console.log('Errors in the form!!!');
    21.         return;
    22.       }
    23.       console.log('Submit!!!');
    24.       console.log(values);
    25.     });
    26.   };
    28.   checkMention = (rule, value, callback) => {
    29.     const { getFieldValue } = this.props.form;
    30.     const mentions = getMentions(getFieldValue('mention'));
    31.     if (mentions.length < 2) {
    32.       callback(new Error('More than one must be selected!'));
    33.     } else {
    34.       callback();
    35.     }
    36.   };
    38.   render() {
    39.     const { getFieldDecorator, getFieldValue } = this.props.form;
    40.     console.log('>> render', getFieldValue('mention') === this.state.initValue);
    41.     return (
    42.       <Form layout="horizontal">
    43.         <FormItem
    44.           id="control-mention"
    45.           label="Top coders"
    46.           labelCol={{ span: 6 }}
    47.           wrapperCol={{ span: 16 }}
    48.         >
    49.           {getFieldDecorator('mention', {
    50.             rules: [{ validator: this.checkMention }],
    51.             initialValue: this.state.initValue,
    52.           })(
    53.             <Mention
    54.               defaultSuggestions={['afc163', 'benjycui', 'yiminghe', 'RaoHai', '中文', 'にほんご']}
    55.             />,
    56.           )}
    57.         </FormItem>
    58.         <FormItem wrapperCol={{ span: 14, offset: 6 }}>
    59.           <Button type="primary" onClick={this.handleSubmit}>
    60.             Submit
    61.           </Button>
    62.           &nbsp;&nbsp;&nbsp;
    63.           <Button onClick={this.handleReset}>Reset</Button>
    64.         </FormItem>
    65.       </Form>
    66.     );
    67.   }
    68. }
    70. const FormDemo = Form.create()(App);
    72. ReactDOM.render(<FormDemo />, mountNode);

    Mention 提及 - 图5

    建议渲染父节点

    指定提示渲染的父节点。

    1. import { Mention, Popover, Button } from 'antd';
    3. const { toString, toContentState } = Mention;
    5. function onChange(editorState) {
    6.   console.log(toString(editorState));
    7. }
    9. function onSelect(suggestion) {
    10.   console.log('onSelect', suggestion);
    11. }
    13. class PopoverContainer extends React.Component {
    14.   getSuggestionContainer = () => this.popover.getPopupDomNode();
    16.   visibleChange = visible => {
    17.     if (visible && this.mention) {
    18.       this.mention.focus();
    19.     }
    20.   };
    22.   render() {
    23.     const mention = (
    24.       <Mention
    25.         ref={ele => (this.mention = ele)}
    26.         style={{ width: '100%' }}
    27.         onChange={onChange}
    28.         defaultValue={toContentState('@afc163')}
    29.         defaultSuggestions={['afc163', 'benjycui', 'yiminghe', 'RaoHai', '中文', 'にほんご']}
    30.         onSelect={onSelect}
    31.         getSuggestionContainer={this.getSuggestionContainer}
    32.       />
    33.     );
    34.     return (
    35.       <Popover
    36.         trigger="click"
    37.         content={mention}
    38.         title="Title"
    39.         ref={popover => (this.popover = popover)}
    40.         onVisibleChange={this.visibleChange}
    41.       >
    42.         <Button type="primary">Click Me</Button>
    43.       </Popover>
    44.     );
    45.   }
    46. }
    48. ReactDOM.render(<PopoverContainer />, mountNode);

    Mention 提及 - 图6

    自定义触发字符

    通过 prefix 属性自定义触发字符。默认为 @, 可以定义为数组。

    1. import { Mention } from 'antd';
    3. const { toString } = Mention;
    5. function onChange(editorState) {
    6.   console.log(toString(editorState));
    7. }
    9. function onSelect(suggestion) {
    10.   console.log('onSelect', suggestion);
    11. }
    13. const users = ['afc163', 'benjycui', 'yiminghe', 'jljsj33', 'dqaria', 'RaoHai'];
    14. const tags = ['1.0', '2.0', '3.0'];
    16. class App extends React.Component {
    17.   constructor() {
    18.     super();
    19.     this.state = {
    20.       suggestions: [],
    21.     };
    22.   }
    24.   onSearchChange = (value, trigger) => {
    25.     console.log('onSearchChange', value, trigger);
    26.     const dataSource = trigger === '@' ? users : tags;
    27.     this.setState({
    28.       suggestions: dataSource.filter(item => item.indexOf(value) !== -1),
    29.     });
    30.   };
    32.   render() {
    33.     return (
    34.       <Mention
    35.         style={{ width: '100%' }}
    36.         onChange={onChange}
    37.         placeholder="input @ to mention people, # to mention tag"
    38.         prefix={['@', '#']}
    39.         onSearchChange={this.onSearchChange}
    40.         suggestions={this.state.suggestions}
    41.         onSelect={onSelect}
    42.       />
    43.     );
    44.   }
    45. }
    47. ReactDOM.render(<App />, mountNode);

    Mention 提及 - 图7

    向上展开

    向上展开建议。

    1. import { Mention } from 'antd';
    3. const { toString } = Mention;
    5. function onChange(contentState) {
    6.   console.log(toString(contentState));
    7. }
    9. function onSelect(suggestion) {
    10.   console.log('onSelect', suggestion);
    11. }
    13. ReactDOM.render(
    14.   <Mention
    15.     style={{ width: '100%' }}
    16.     onChange={onChange}
    17.     defaultSuggestions={['afc163', 'benjycui', 'yiminghe', 'RaoHai', '中文', 'にほんご']}
    18.     onSelect={onSelect}
    19.     placement="top"
    20.   />,
    21.   mountNode,
    22. );

    Mention 提及 - 图8

    自定义建议

    自定义建议

    注意，自定义建议时，onSearchChange 必须不能为空。

    1. import { Mention } from 'antd';
    3. const Nav = Mention.Nav;
    5. const webFrameworks = [
    6.   { name: 'React', type: 'JavaScript' },
    7.   { name: 'Angular', type: 'JavaScript' },
    8.   { name: 'Laravel', type: 'PHP', disabled: true },
    9.   { name: 'Flask', type: 'Python' },
    10.   { name: 'Django', type: 'Python' },
    11. ];
    13. function onSelect(suggestion, data) {
    14.   console.log('onSelect', suggestion, data);
    15. }
    17. class CustomNavMention extends React.Component {
    18.   state = {
    19.     suggestions: [],
    20.   };
    22.   onSearchChange = value => {
    23.     const searchValue = value.toLowerCase();
    24.     const filtered = webFrameworks.filter(
    25.       item => item.name.toLowerCase().indexOf(searchValue) !== -1,
    26.     );
    27.     const suggestions = filtered.map(suggestion => (
    28.       <Nav value={suggestion.name} data={suggestion}>
    29.         <span>
    30.           {suggestion.name} - {suggestion.type}
    31.         </span>
    32.       </Nav>
    33.     ));
    34.     this.setState({ suggestions });
    35.   };
    37.   render() {
    38.     const { suggestions } = this.state;
    39.     return (
    40.       <Mention
    41.         placeholder="@someone"
    42.         style={{ width: '100%' }}
    43.         suggestions={suggestions}
    44.         onSearchChange={this.onSearchChange}
    45.         onSelect={onSelect}
    46.       />
    47.     );
    48.   }
    49. }
    51. ReactDOM.render(<CustomNavMention />, mountNode);

    Mention 提及 - 图9

    受控模式

    受控模式.

    1. import { Mention } from 'antd';
    3. const { toContentState } = Mention;
    5. class App extends React.Component {
    6.   state = {
    7.     value: toContentState('@afc163'),
    8.   };
    10.   componentDidMount() {
    11.     this.mention.focus();
    12.   }
    14.   handleChange = editorState => {
    15.     this.setState({
    16.       value: editorState,
    17.     });
    18.   };
    20.   render() {
    21.     return (
    22.       <Mention
    23.         ref={ele => (this.mention = ele)}
    24.         defaultSuggestions={['afc163', 'benjycui', 'yiminghe', 'RaoHai', '中文', 'にほんご']}
    25.         value={this.state.value}
    26.         onChange={this.handleChange}
    27.       />
    28.     );
    29.   }
    30. }
    32. ReactDOM.render(<App />, mountNode);

    Mention 提及 - 图10

    多行

    多行模式，多行模式必须指定高度。

    1. import { Mention } from 'antd';
    3. const { toString } = Mention;
    5. function onChange(editorState) {
    6.   console.log(toString(editorState));
    7. }
    9. ReactDOM.render(
    10.   <Mention
    11.     style={{ width: '100%', height: 100 }}
    12.     onChange={onChange}
    13.     defaultSuggestions={['afc163', 'benjycui', 'yiminghe', 'jljsj33', 'dqaria', 'RaoHai']}
    14.     multiLines
    15.   />,
    16.   mountNode,
    17. );

    Mention 提及 - 图11

    无效或只读

    通过 disabled 属性设置是否生效。通过 readOnly 属性设置是否只读。

    1. import { Mention } from 'antd';
    3. const { toString } = Mention;
    5. function onChange(editorState) {
    6.   console.log(toString(editorState));
    7. }
    9. const users = ['afc163', 'benjycui', 'yiminghe', 'jljsj33', 'dqaria', 'RaoHai'];
    11. function App() {
    12.   return (
    13.     <div>
    14.       <div style={{ marginBottom: 10 }}>
    15.         <Mention
    16.           style={{ width: '100%' }}
    17.           onChange={onChange}
    18.           placeholder="this is disabled Mention"
    19.           suggestions={users}
    20.           disabled
    21.         />
    22.       </div>
    23.       <Mention
    24.         style={{ width: '100%' }}
    25.         onChange={onChange}
    26.         placeholder="this is readOnly Mention"
    27.         suggestions={users}
    28.         readOnly
    29.       />
    30.     </div>
    31.   );
    32. }
    34. ReactDOM.render(<App />, mountNode);

    API

    1. <Mention
    2.   onChange={onChange}
    3.   suggestions={['afc163', 'benjycui', 'yiminghe', 'jljsj33', 'dqaria', 'RaoHai']}
    4. />

    Mention API

    API说明类型
    getMentions获取当前 contentState 中提到的人的列表Function(contentState: ContentState): string[]
    toContentState把字符串转成 ContentStateFunction(value: string): ContentState
    toString把 ContentState 转成字符串Function(contentState: ContentState): string

    Mention

    参数说明类型默认值
    autoFocus自动获取焦点booleanfalse
    defaultValue默认值ContentState, 可以用 Mention.toContentState(text) 把文字转换成 ContentStatenull
    defaultSuggestions默认建议内容Array<string|Mention.Nav>[]
    disabled是否禁用状态.booleanfalse
    getSuggestionContainer菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位function()() => document.body
    loading加载中booleanfalse
    multiLines多行模式booleanfalse
    notFoundContent未找到时的内容string'无匹配结果，轻敲空格完成输入'
    placeholder输入框默认文字stringnull
    placement建议框位置，可选 top bottomstring'bottom'
    prefix触发弹出下拉框的字符string or Array<string>'@'
    readOnly是否只读.booleanfalse
    suggestions建议内容Array<string|Mention.Nav>[]
    suggestionStyle弹出下拉框样式object{}
    value值ContentStatenull
    onBlur失去焦点时回调function(e)null
    onChange输入框内容变化时回调function(contentState: ContentState)null
    onFocus获得焦点时回调function(e)null
    onSearchChange输入框中 @ 变化时回调function(value:string, trigger: string)[]
    onSelect下拉框选择建议时回调function(suggestion: string, data?: any)null

    Mention 方法

    名称描述
    blur()移除焦点
    focus()获取焦点

    Nav

    参数说明类型默认值
    children建议内容object{}
    value建议值，选择建议时，用此值插入到输入框中string""