mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-05 09:49:57 +08:00
ecb2eb6ede
* init * first demo * support empty * add loading support * add form sample * update form sample * omit value & defaultValue * add 2 rest demo * placement support * update docs * fix test * update docs * add test case * fix lint * follow textarea style * update docs style
1.8 KiB
1.8 KiB
order | title | ||||
---|---|---|---|---|---|
2 |
|
zh-CN
受控模式,例如配合 Form 使用。
en-US
Controlled mode, for example, to work with Form
.
import { Mentions, Form, Button } from 'antd';
const { Option, getMentions } = Mentions;
class App extends React.Component {
handleReset = e => {
e.preventDefault();
this.props.form.resetFields();
};
handleSubmit = e => {
e.preventDefault();
this.props.form.validateFields((errors, values) => {
if (errors) {
console.log('Errors in the form!!!');
return;
}
console.log('Submit!!!');
console.log(values);
});
};
checkMention = (rule, value, callback) => {
const mentions = getMentions(value);
if (mentions.length < 2) {
callback(new Error('More than one must be selected!'));
} else {
callback();
}
};
render() {
const {
form: { getFieldDecorator },
} = this.props;
return (
<Form layout="horizontal">
<Form.Item label="Top coders" labelCol={{ span: 6 }} wrapperCol={{ span: 16 }}>
{getFieldDecorator('mention', {
rules: [{ validator: this.checkMention }],
})(
<Mentions rows="3">
<Option value="afc163">afc163</Option>
<Option value="zombieJ">zombieJ</Option>
<Option value="yesmeck">yesmeck</Option>
</Mentions>,
)}
</Form.Item>
<Form.Item wrapperCol={{ span: 14, offset: 6 }}>
<Button type="primary" onClick={this.handleSubmit}>
Submit
</Button>
<Button onClick={this.handleReset}>Reset</Button>
</Form.Item>
</Form>
);
}
}
const FormDemo = Form.create()(App);
ReactDOM.render(<FormDemo />, mountNode);