mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-06 02:15:35 +08:00
1.7 KiB
1.7 KiB
order | title | ||||
---|---|---|---|---|---|
2 |
|
zh-CN
更复杂的例子,自定义了页脚的按钮,点击提交后进入 loading 状态,完成后关闭。
en-US
A more complex example, as illustrated in this example, we define a customized footer button bar, the dialog will change to loading state after clicking submit button , when the loading is over, the modal dialog will be closed.
import { Modal, Button } from 'antd';
const Test = React.createClass({
getInitialState() {
return {
loading: false,
visible: false,
};
},
showModal() {
this.setState({
visible: true,
});
},
handleOk() {
this.setState({ loading: true });
setTimeout(() => {
this.setState({ loading: false, visible: false });
}, 3000);
},
handleCancel() {
this.setState({ visible: false });
},
render() {
return (
<div>
<Button type="primary" onClick={this.showModal}>
Open modal dialog
</Button>
<Modal
visible={this.state.visible}
title="Title"
onOk={this.handleOk}
onCancel={this.handleCancel}
footer={[
<Button key="back" type="ghost" size="large" onClick={this.handleCancel}>Return</Button>,
<Button key="submit" type="primary" size="large" loading={this.state.loading} onClick={this.handleOk}>
Submit
</Button>,
]}
>
<p>Some contents...</p>
<p>Some contents...</p>
<p>Some contents...</p>
<p>Some contents...</p>
<p>Some contents...</p>
</Modal>
</div>
);
},
});
ReactDOM.render(<Test />, mountNode);