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

75 lines
1.8 KiB
Markdown

---
order: 2
title:
zh-CN: 自定义页脚
en-US: Customized Footer
---
## zh-CN
更复杂的例子,自定义了页脚的按钮,点击提交后进入 loading 状态,完成后关闭。
不需要默认确定取消按钮时,你可以把 `footer` 设为 `null`
## en-US
A more complex example which 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.
You could set `footer` to `null` if you don't need default footer buttons.
````jsx
import { Modal, Button } from 'antd';
class App extends React.Component {
state = {
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" 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(<App />, mountNode);
````