ant-design/components/modal/demo/basic.md

48 lines
968 B
Markdown
Raw Normal View History

2015-06-04 21:17:52 +08:00
# 基本
- order: 0
2015-06-12 17:44:29 +08:00
第一个对话框。
2015-06-04 21:17:52 +08:00
---
````jsx
2015-06-10 22:02:13 +08:00
var Modal = antd.Modal;
2015-06-04 21:17:52 +08:00
2015-09-22 15:11:29 +08:00
var App = React.createClass({
getInitialState() {
return { visible: false };
2015-06-12 23:31:44 +08:00
},
showModal() {
2015-06-12 23:31:44 +08:00
this.setState({
visible: true
2015-06-12 23:31:44 +08:00
});
2015-06-10 22:02:13 +08:00
},
2015-06-12 17:11:32 +08:00
handleOk() {
console.log('点击了确定');
2015-06-12 23:31:44 +08:00
this.setState({
confirmLoading: false,
2015-06-14 13:20:35 +08:00
visible: false
2015-06-12 23:31:44 +08:00
});
2015-06-10 22:02:13 +08:00
},
2015-09-08 12:38:21 +08:00
handleCancel() {
this.setState({
visible: false
});
},
2015-06-12 17:11:32 +08:00
render() {
2015-06-10 22:02:13 +08:00
return <div>
2015-06-12 17:11:32 +08:00
<button className="ant-btn ant-btn-primary" onClick={this.showModal}>显示对话框</button>
2015-09-22 15:11:29 +08:00
<Modal title="第一个 Modal" visible={this.state.visible}
confirmLoading={this.state.confirmLoading} onOk={this.handleOk} onCancel={this.handleCancel}>
2015-06-12 17:11:32 +08:00
<p>对话框的内容</p>
2015-06-18 15:46:59 +08:00
<p>对话框的内容</p>
<p>对话框的内容</p>
2015-06-12 17:11:32 +08:00
</Modal>
2015-06-10 22:02:13 +08:00
</div>;
}
});
2015-06-04 21:17:52 +08:00
2015-09-22 15:11:29 +08:00
React.render(<App /> , document.getElementById('components-modal-demo-basic'));
2015-06-04 21:17:52 +08:00
````