一、概述

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 (
          
            
              Open Modal
            
            
              
Some contents...
              
Some contents...
              
Some contents...