Ant-Design-組件-——-Modal.md

用法

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技術、交互設計、圖像繪製、數據分析等研究。

歡迎和咱們一塊兒並肩做戰： web@talkmoney.cn
訪問 www.talkmoney.cn 瞭解更多

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