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

53 lines
955 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-06-10 22:02:13 +08:00
var Test = React.createClass({
2015-06-12 23:31:44 +08:00
getInitialState(){
return{
2015-06-14 13:20:35 +08:00
visible: false
2015-06-12 23:31:44 +08:00
}
},
2015-06-12 17:11:32 +08:00
showModal() {
2015-06-12 23:31:44 +08:00
this.setState({
2015-06-14 13:20:35 +08:00
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({
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-06-12 17:11:32 +08:00
handleCancel() {
console.log('点击了取消');
2015-06-25 15:35:46 +08:00
this.setState({
visible: false
});
2015-06-10 22:02:13 +08:00
},
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>
<Modal title="第一个 Modal"
2015-06-12 23:31:44 +08:00
visible={this.state.visible}
2015-06-12 17:11:32 +08:00
onOk={this.handleOk}
onCancel={this.handleCancel}>
<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-06-10 22:02:13 +08:00
React.render(<Test/> , document.getElementById('components-modal-demo-basic'));
2015-06-04 21:17:52 +08:00
````
2015-06-12 17:11:32 +08:00