2016-07-20 18:56:44 +08:00
|
|
|
---
|
2016-10-20 13:51:44 +08:00
|
|
|
order: 4
|
2016-09-23 10:14:57 +08:00
|
|
|
title:
|
2016-10-20 13:51:44 +08:00
|
|
|
zh-CN: 配合 Form 使用
|
|
|
|
en-US: With Form
|
2016-07-20 18:56:44 +08:00
|
|
|
---
|
|
|
|
|
|
|
|
## zh-CN
|
|
|
|
|
2017-02-20 21:39:07 +08:00
|
|
|
受控模式,例如配合 Form 使用。
|
2016-07-20 18:56:44 +08:00
|
|
|
|
|
|
|
## en-US
|
|
|
|
|
2017-02-20 21:39:07 +08:00
|
|
|
Controlled mode, for example, to work with `Form`.
|
2016-07-20 18:56:44 +08:00
|
|
|
|
2017-02-13 10:55:53 +08:00
|
|
|
````jsx
|
2016-07-20 18:56:44 +08:00
|
|
|
import { Mention, Form, Button } from 'antd';
|
2017-05-05 14:53:46 +08:00
|
|
|
const { toContentState, getMentions } = Mention;
|
2016-07-20 18:56:44 +08:00
|
|
|
const FormItem = Form.Item;
|
|
|
|
|
2017-02-20 21:39:07 +08:00
|
|
|
class App extends React.Component {
|
2017-02-20 21:47:57 +08:00
|
|
|
state = {
|
2017-05-05 14:53:46 +08:00
|
|
|
initValue: toContentState('@afc163'),
|
2017-02-20 21:39:07 +08:00
|
|
|
}
|
|
|
|
handleReset = (e) => {
|
2016-07-20 18:56:44 +08:00
|
|
|
e.preventDefault();
|
|
|
|
this.props.form.resetFields();
|
2017-02-20 21:39:07 +08:00
|
|
|
}
|
|
|
|
handleSubmit = (e) => {
|
2016-07-20 18:56:44 +08:00
|
|
|
e.preventDefault();
|
|
|
|
this.props.form.validateFields((errors, values) => {
|
2016-08-23 21:00:35 +08:00
|
|
|
if (errors) {
|
2016-07-20 18:56:44 +08:00
|
|
|
console.log('Errors in form!!!');
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
console.log('Submit!!!');
|
|
|
|
console.log(values);
|
|
|
|
});
|
2017-02-20 21:39:07 +08:00
|
|
|
}
|
|
|
|
checkMention = (rule, value, callback) => {
|
2016-07-20 18:56:44 +08:00
|
|
|
const { getFieldValue } = this.props.form;
|
|
|
|
const mentions = getMentions(getFieldValue('mention'));
|
|
|
|
if (mentions.length < 2) {
|
2016-09-30 14:56:53 +08:00
|
|
|
callback(new Error('More than one must be selected!'));
|
2016-07-20 18:56:44 +08:00
|
|
|
} else {
|
|
|
|
callback();
|
|
|
|
}
|
2017-02-20 21:39:07 +08:00
|
|
|
}
|
2016-07-20 18:56:44 +08:00
|
|
|
render() {
|
2016-09-09 13:55:46 +08:00
|
|
|
const { getFieldDecorator, getFieldValue } = this.props.form;
|
2016-07-20 18:56:44 +08:00
|
|
|
console.log('>> render', getFieldValue('mention') === this.state.initValue);
|
2016-07-21 15:40:13 +08:00
|
|
|
return (
|
2017-03-06 17:51:45 +08:00
|
|
|
<Form layout="horizontal">
|
2016-07-21 15:40:13 +08:00
|
|
|
<FormItem
|
|
|
|
id="control-mention"
|
2016-10-31 15:39:03 +08:00
|
|
|
label="Top coders"
|
2016-07-21 15:40:13 +08:00
|
|
|
labelCol={{ span: 6 }}
|
2017-03-19 00:19:11 +08:00
|
|
|
wrapperCol={{ span: 16 }}
|
2016-07-21 15:40:13 +08:00
|
|
|
>
|
2016-09-09 13:55:46 +08:00
|
|
|
{getFieldDecorator('mention', {
|
|
|
|
rules: [
|
|
|
|
{ validator: this.checkMention },
|
|
|
|
],
|
|
|
|
initialValue: this.state.initValue,
|
|
|
|
})(
|
|
|
|
<Mention
|
|
|
|
suggestions={['afc163', 'benjycui', 'yiminghe', 'RaoHai', '中文', 'にほんご']}
|
2017-03-19 00:19:11 +08:00
|
|
|
style={{ height: 60 }}
|
2016-09-09 13:55:46 +08:00
|
|
|
/>
|
|
|
|
)}
|
2016-07-21 15:53:33 +08:00
|
|
|
</FormItem>
|
2016-07-21 15:40:13 +08:00
|
|
|
<FormItem wrapperCol={{ span: 14, offset: 6 }}>
|
2016-09-30 14:56:53 +08:00
|
|
|
<Button type="primary" onClick={this.handleSubmit}>Submit</Button>
|
2016-07-21 15:40:13 +08:00
|
|
|
|
2017-02-04 22:35:33 +08:00
|
|
|
<Button onClick={this.handleReset}>Reset</Button>
|
2016-07-21 15:40:13 +08:00
|
|
|
</FormItem>
|
|
|
|
</Form>
|
|
|
|
);
|
2017-02-20 21:39:07 +08:00
|
|
|
}
|
|
|
|
}
|
2016-07-20 18:56:44 +08:00
|
|
|
|
2017-02-20 21:40:24 +08:00
|
|
|
const FormDemo = Form.create()(App);
|
2016-07-21 15:40:13 +08:00
|
|
|
|
2017-02-20 21:40:24 +08:00
|
|
|
ReactDOM.render(<FormDemo />, mountNode);
|
2016-07-20 18:56:44 +08:00
|
|
|
````
|