Mention提及

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

    基本使用

    基本使用

    Mention 提及 - 图2

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

    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);

    头像

    自定义建议（含头像）

    注意，自定义建议时，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);

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

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

    Mention 提及 - 图5

    建议渲染父节点

    指定提示渲染的父节点。

    通过 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));
    8. function onSelect(suggestion) {
    9.   console.log('onSelect', suggestion);
    12. ReactDOM.render(
    13.   <Mention
    14.     style={{ width: '100%' }}
    15.     onChange={onChange}
    16.     defaultSuggestions={['afc163', 'benjycui', 'yiminghe', 'RaoHai', '中文', 'にほんご']}
    17.     onSelect={onSelect}
    18.     placement="top"
    19.   />,
    20.   mountNode,
    21. );

    自定义建议

    注意，自定义建议时，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 提及 - 图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. );

    无效或只读

    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);
    1. <Mention
    2.   onChange={onChange}
    3.   suggestions={['afc163', 'benjycui', 'yiminghe', 'jljsj33', 'dqaria', 'RaoHai']}
    4. />