ant-design/components/mention/demo/controlled.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

86 lines
2.1 KiB
Markdown

---
order: 4
title:
zh-CN: 配合 Form 使用
en-US: With Form
---
## zh-CN
受控模式,例如配合 Form 使用。
## en-US
Controlled mode, for example, to work with `Form`.
````jsx
import { Mention, Form, Button } from 'antd';
const { toContentState, getMentions } = Mention;
const FormItem = Form.Item;
class App extends React.Component {
state = {
initValue: toContentState('@afc163'),
}
handleReset = (e) => {
e.preventDefault();
this.props.form.resetFields();
}
handleSubmit = (e) => {
e.preventDefault();
this.props.form.validateFields((errors, values) => {
if (errors) {
console.log('Errors in form!!!');
return;
}
console.log('Submit!!!');
console.log(values);
});
}
checkMention = (rule, value, callback) => {
const { getFieldValue } = this.props.form;
const mentions = getMentions(getFieldValue('mention'));
if (mentions.length < 2) {
callback(new Error('More than one must be selected!'));
} else {
callback();
}
}
render() {
const { getFieldDecorator, getFieldValue } = this.props.form;
console.log('>> render', getFieldValue('mention') === this.state.initValue);
return (
<Form layout="horizontal">
<FormItem
id="control-mention"
label="Top coders"
labelCol={{ span: 6 }}
wrapperCol={{ span: 16 }}
>
{getFieldDecorator('mention', {
rules: [
{ validator: this.checkMention },
],
initialValue: this.state.initValue,
})(
<Mention
suggestions={['afc163', 'benjycui', 'yiminghe', 'RaoHai', '中文', 'にほんご']}
style={{ height: 60 }}
/>
)}
</FormItem>
<FormItem wrapperCol={{ span: 14, offset: 6 }}>
<Button type="primary" onClick={this.handleSubmit}>Submit</Button>
&nbsp;&nbsp;&nbsp;
<Button onClick={this.handleReset}>Reset</Button>
</FormItem>
</Form>
);
}
}
const FormDemo = Form.create()(App);
ReactDOM.render(<FormDemo />, mountNode);
````