Ant Design 組件 —— Modal

用法

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疊方塊直播競賽小遊戲。擅長網站建設、公衆號開發、微信小程序開發、小遊戲、公衆號開發，專一於前端框架、服務端渲染、SEO技術、交互設計、圖像繪製、數據分析等研究。

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