update modal demos

pull/20/head
afc163 10 years ago
parent 2dc587269f
commit 0cbf1b9cc3

@ -2,7 +2,7 @@
- order: 1
点击确定后异步关闭对话框。
---

@ -0,0 +1,57 @@
# 自定义页脚
- order: 2
更复杂的例子,点击提交后进入 loading 状态,完成后关闭。
---
````jsx
var Modal = antd.Modal;
var Test = React.createClass({
getInitialState: function() {
return {
loading: false
};
},
showModal() {
this.refs.modal.show();
},
handleOk() {
this.setState({
loading: true
});
setTimeout(()=> {
this.refs.modal.hide();
this.setState({
loading: false
});
}, 3000);
},
handleCancel() {
this.refs.modal.hide();
},
render() {
return <div>
<button className="ant-btn ant-btn-primary" onClick={this.showModal}>
显示对话框
</button>
<Modal ref="modal"
title="对话框标题"
onOk={this.handleOk}
onCancel={this.handleCancel}
footer={[
<button className="ant-btn" onClick={this.handleCancel}>返 回</button>,
<button className="ant-btn ant-btn-primary" onClick={this.handleOk}>
提 交 <i className={'anticon anticon-loading'+(this.state.loading?'':'hide')}></i>
</button>
]}>
<p>对话框的内容</p>
</Modal>
</div>;
}
});
React.render(<Test/> , document.getElementById('components-modal-demo-footer'));
````

@ -44,7 +44,8 @@ var Modal = React.createClass({
render() {
var props = this.props;
var footer = [
console.log(props);
var footer = props.footer || [
<button type="button" className="ant-btn-default ant-btn" onClick={this.handleCancel}> </button>,
<button type="button" className="ant-btn-primary ant-btn" onClick={this.handleOk}> </button>
];

@ -19,7 +19,6 @@
|------------|----------------|------------------|--------------|
| title | 标题 | React.Element | 无 |
| onOk | 点击确定回调 | function | 无 |
| onBeforeClose | 点击遮罩层或右上角叉或取消按钮关闭前回调 | function | 无 |
| onCancel | 点击遮罩层或右上角叉或取消按钮的回调 | function | 无 |
| width | 宽度 | String or Number | 500 |
| visible | 是否显示 | Boolean | false |
| footer | 底部内容 | React.Element | 确定取消按钮 |

Loading…
Cancel
Save