mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-12-23 06:58:33 +08:00
Code Issues Actions 15 Packages Projects Releases Wiki Activity
29d2a756b0
ant-design/components/mention/demo/readonly.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

987 B
Raw Blame History

order title
7
zh-CN en-US
无效或只读 disabled or readOnly

zh-CN

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

en-US

Configurate disabled and readOnly.

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

function onChange(editorState) {
  console.log(toString(editorState));
}

const users = ['afc163', 'benjycui', 'yiminghe', 'jljsj33', 'dqaria', 'RaoHai'];

function App() {
  return (
    <div>
      <div style={{ marginBottom: 10 }}>
        <Mention
          style={{ width: '100%' }}
          onChange={onChange}
          placeholder="this is disabled Mention"
          suggestions={users}
          disabled
        />
      </div>
      <Mention
        style={{ width: '100%' }}
        onChange={onChange}
        placeholder="this is readOnly Mention"
        suggestions={users}
        readOnly
      />
    </div>
  );
}


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