1. 程式人生 > >AntD Modal框銷燬(隱藏時清除資料)

AntD Modal框銷燬(隱藏時清除資料)

Modal元件自帶的visible屬性只能控制Modal的顯示與否,無法真正銷燬Modal。

要想真正銷燬Modal我們可以不控制Modal的visible屬性,轉而控制Modal這個元件的有無。

首先,定義一個控制Modal有無的狀態:

this.state = {
  destroy:true     //設一開始為不顯示狀態
}
通過此狀態來判斷是否生成Modal元件

{
  this.state.isDestroy
  ? ''
  : <Modal className="cjy-rcm-modal" title={this.oprt} footer={null} visible={this.state.visible} onOk={this.handleOk} onCancel={this.handleCancel}>
        <ReAddScoreOption itemData={this.state.itemData} handleCancel={this.handleCancel} submitData={this.submitData}/>
   </Modal>
}
顯示:

this.setState({
  destroy:false
});
銷燬:

this.setState({
  destroy:true
});
ps:新版本的ant design已經增加這一功能啦, destroyOnClose屬性