mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-26 01:42:30 +08:00
65 lines
1.5 KiB
Markdown
65 lines
1.5 KiB
Markdown
|
# 与 Modal 配合使用
|
|||
|
|
|||
|
- order: 14
|
|||
|
|
|||
|
在 Modal 中使用 Form,当点击 Modal 的确定时,调用 `this.props.form.getFieldsValue` 获取表单内的值。
|
|||
|
|
|||
|
---
|
|||
|
|
|||
|
````jsx
|
|||
|
import { Button, Form, Input, Modal } from 'antd';
|
|||
|
const createForm = Form.create;
|
|||
|
const FormItem = Form.Item;
|
|||
|
|
|||
|
let Demo = React.createClass({
|
|||
|
getInitialState() {
|
|||
|
return { visible: false };
|
|||
|
},
|
|||
|
|
|||
|
handleSubmit() {
|
|||
|
console.log(this.props.form.getFieldsValue());
|
|||
|
this.hideModal();
|
|||
|
},
|
|||
|
|
|||
|
showModal() {
|
|||
|
this.setState({ visible: true });
|
|||
|
},
|
|||
|
|
|||
|
hideModal() {
|
|||
|
this.setState({ visible: false });
|
|||
|
},
|
|||
|
|
|||
|
render() {
|
|||
|
const { getFieldProps } = this.props.form;
|
|||
|
|
|||
|
const formItemLayout = {
|
|||
|
labelCol: { span: 4 },
|
|||
|
wrapperCol: { span: 20 },
|
|||
|
};
|
|||
|
return (
|
|||
|
<div>
|
|||
|
<Button type="primary" onClick={this.showModal}>点击有惊喜</Button>
|
|||
|
<Modal title="登录" visible={this.state.visible} onOk={this.handleSubmit} onCancel={this.hideModal}>
|
|||
|
<Form horizontal form={this.props.form}>
|
|||
|
<FormItem
|
|||
|
{...formItemLayout}
|
|||
|
label="用户名:">
|
|||
|
<Input {...getFieldProps('username', {})} type="text" autoComplete="off" />
|
|||
|
</FormItem>
|
|||
|
<FormItem
|
|||
|
{...formItemLayout}
|
|||
|
label="密码:">
|
|||
|
<Input {...getFieldProps('password', {})} type="password" autoComplete="off" />
|
|||
|
</FormItem>
|
|||
|
</Form>
|
|||
|
</Modal>
|
|||
|
</div>
|
|||
|
);
|
|||
|
}
|
|||
|
});
|
|||
|
|
|||
|
Demo = createForm()(Demo);
|
|||
|
|
|||
|
ReactDOM.render(<Demo />, mountNode);
|
|||
|
````
|