用法

1. 引入 Modal 元件

import { Modal } from 'antd';

2. 定義元件屬性

|引數 |    說明 |    型別 |    預設值 |
|---|---|---|---|
|title |    標題 |    string 或者 ReactNode 無 |
|visible |    對話方塊是否可見 |   boolean |   無 |
|onCancel |    取消回撥，引數為關閉函式，返回  promise  時 resolve 後自動關閉 | function |  無 |
|onOk |    點選確定回撥，引數為關閉函式，返回  promise  時 resolve 後自動關閉 | function |    無 |
 

  state = {
    isShowEditModal: false, //  顯示Modal
  }

  handleEditOkClick = () => {
    console.log('點選確定');

    this.setState ({
      isShowEditModal: false,
    })
  }

  handleEditCancelClick = () => {
    console.log('點選取消');

    this.setState ({
      isShowEditModal: false,
    })
  }
 

3. 渲染元件

<Modal
    title="資訊填寫"
    visible={this.state.isShowEditModal}
    onOk={this.handleEditOkClick}
    onCancel={this.handleEditCancelClick}
>
    <p>Some contents...</p>
    <p>Some contents...</p>
    <p>Some contents...</p>
</Modal>
 

深入瞭解

• Ant Design - Modal對話方塊

作者簡介：李堯暉，蘆葦科技web前端開發工程師，代表作品：飛花亭小程式、續航基因、YY表情紅包、YY疊方塊直播競賽小遊戲。擅長網站建設、微信公眾號開發、微信小程式開發、小遊戲製作、企業微信製作、H5建設，專注於前端框架、服務端渲染、SEO技術、互動設計、影象繪製、資料分析等研究。

歡迎和我們一起並肩作戰： [email protected]
訪問 www.talkmoney.cn 瞭解更多

提供深圳微信公眾號製作，高質量的釘釘外包，廣東企業微信建設，東莞微信小程式製作，專業的小遊戲開發，廣州H5建設