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

47 lines
894 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
import { Modal, Button } from 'antd';
2015-06-04 21:17:52 +08:00
const App = React.createClass({
2015-09-22 15:11:29 +08:00
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({
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>
<Button type="primary" onClick={this.showModal}>显示对话框</Button>
2015-09-22 15:11:29 +08:00
<Modal title="第一个 Modal" visible={this.state.visible}
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-10-20 16:47:55 +08:00
ReactDOM.render(<App /> , document.getElementById('components-modal-demo-basic'));
2015-06-04 21:17:52 +08:00
````