一、概述
Modal 是 Ant Design 中常用的組件之一,用于彈出模態(tài)對(duì)話(huà)框。Antd Modal 組件提供了多種彈窗窗體形態(tài)、自定義 footer、自定義圖標(biāo)等功能,使用起來(lái)非常便捷。本文將介紹Antd Modal的基本用法、可配置項(xiàng)以及一些擴(kuò)展應(yīng)用。
二、基本用法
使用 Antd Modal 組件需要先安裝 antd 包,然后引入 Modal 組件,比如:
import { Modal } from 'antd';
接下來(lái),我們可以通過(guò)以下方法來(lái)新建一個(gè) Modal 對(duì)話(huà)框,其中 title 表示模態(tài)對(duì)話(huà)框的標(biāo)題,visible 表示是否顯示,onOk 和 onCancel 分別對(duì)應(yīng)確認(rèn)和取消按鈕的回調(diào)函數(shù):
class App extends React.Component {
state = {
visible: false,
};
showModal = () => {
this.setState({
visible: true,
});
};
handleOk = e => {
console.log(e);
this.setState({
visible: false,
});
};
handleCancel = e => {
console.log(e);
this.setState({
visible: false,
});
};
render() {
return (
Some contents...
Some contents...
Some contents...