ant-design/components/mention/demo/controlled.md

87 lines
2.1 KiB
Markdown
Raw Normal View History

---
order: 4
2016-09-23 10:14:57 +08:00
title:
zh-CN: 配合 Form 使用
en-US: With Form
---
## zh-CN
受控模式,例如配合 Form 使用
## en-US
2016-09-23 10:14:57 +08:00
Controlled mode, for example, to work with `Form` .
2017-01-19 15:19:03 +08:00
````__react
import { Mention, Form, Button } from 'antd';
const { toEditorState, getMentions } = Mention;
const FormItem = Form.Item;
let App = React.createClass({
getInitialState() {
return {
initValue: toEditorState('@afc163'),
};
},
handleReset(e) {
e.preventDefault();
this.props.form.resetFields();
},
handleSubmit(e) {
e.preventDefault();
this.props.form.validateFields((errors, values) => {
2016-08-23 21:00:35 +08:00
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);
2016-07-21 15:40:13 +08:00
return (
<Form horizontal>
2016-07-21 15:40:13 +08:00
<FormItem
id="control-mention"
label="Top coders"
2016-07-21 15:40:13 +08:00
labelCol={{ span: 6 }}
wrapperCol={{ span: 14 }}
>
{getFieldDecorator('mention', {
rules: [
{ validator: this.checkMention },
],
initialValue: this.state.initValue,
})(
<Mention
suggestions={['afc163', 'benjycui', 'yiminghe', 'RaoHai', '中文', 'にほんご']}
/>
)}
2016-07-21 15:53:33 +08:00
</FormItem>
2016-07-21 15:40:13 +08:00
<FormItem wrapperCol={{ span: 14, offset: 6 }}>
<Button type="primary" onClick={this.handleSubmit}>Submit</Button>
2016-07-21 15:40:13 +08:00
&nbsp;&nbsp;&nbsp;
2017-02-04 22:35:33 +08:00
<Button onClick={this.handleReset}>Reset</Button>
2016-07-21 15:40:13 +08:00
</FormItem>
</Form>
);
},
});
App = Form.create()(App);
2016-07-21 15:40:13 +08:00
ReactDOM.render(<App />, mountNode);
````