ant-design/components/mention/demo/controllder-simple.md
陆离 4518b02095 feat: support Mention[disabled|readOnly] and add some warning(#6004)
#### FEATURES

 * use `ContentState` instead of `EditorState`, selection events won't trigger
   onChange anymore.
 * deprecated `Mention.toEditorState`, instead of `Mention.toContentState`,
 * `Mention.toEditorState` are compatibled, but have a warnning in console.

 #### ISSUES

 * `disabled` and `readOnly` props supported.
 * fixed controlled mode bug.

 * close #5788
 * close #5175
 * close #https://github.com/react-component/editor-mention/issues/7
2017-05-05 14:53:46 +08:00

650 B

order title
3
zh-CN en-US
受控模式 Controlled

zh-CN

受控模式.

en-US

Controlled mode.

import { Mention } from 'antd';
const { toContentState } = Mention;

class App extends React.Component {
  state = {
    value: toContentState('@afc163'),
  }
  handleChange = (editorState) => {
    this.setState({
      value: editorState,
    });
  }
  render() {
    return (
      <Mention
        suggestions={['afc163', 'benjycui', 'yiminghe', 'RaoHai', '中文', 'にほんご']}
        value={this.state.value}
        onChange={this.handleChange}
      />
    );
  }
}

ReactDOM.render(<App />, mountNode);