Modal組件destroyOnClose屬性
destroyOnClose屬性在antd文檔上標(biāo)寫的說明時(shí)關(guān)閉時(shí)銷毀 Modal 里的子元素，默認(rèn)值為false累提。有關(guān)antd Modal相關(guān)參見下方鏈接
https://ant.design/components/modal-cn/
此屬性值不能對(duì)每種類型的組件值傳遞都適用，列出下面幾種情況磁浇，并展示出效果斋陪，以作參考展示該屬性的使用范圍，下面所說的父組件表示為包含destroyOnClose屬性的Modal所在的組件扯夭，子組件表示被包含在Modal中的組件
-
要消除的值在父組件被定義鳍贾、在父組件中被使用
父組件代碼
import React from 'react';
import { Modal, Input } from 'antd';
import './index.styl';
export default class Test extends React.PureComponent {
constructor(props) {
super(props);
this.state = {
loading: false,
visible: false,
value: ''
};
}
componentWillReceiveProps(nextProps) {
const self = this;
const { visible } = nextProps;
const visiblePre = self.state.visible;
if (visible && visible !== visiblePre) {
self.setState({ visible });
}
}
// 彈窗取消
handleCancel = () => {
const self = this;
self.setState({ visible: false });
self.props.handleCancel();
}
// input輸入改變
handleChange = (e) => {
const self = this;
const value = e.target.value;
self.setState({ value });
}
render() {
const self = this;
const {
visible,
value,
} = self.state;
return (
<Modal
visible={visible}
onOk={self.handleCancel}
onCancel={self.handleCancel}
title="destroyOnClose測(cè)試"
destroyOnClose={true}
>
<div>
<Input
placeholder="父組件"
value={value}
onChange={self.handleChange}
/>
</div>
</Modal>
);
}
}
在下方將展示輸入效果（圖一）及點(diǎn)擊取消按鈕后再次進(jìn)入此彈窗的顯示（圖二）
圖一：輸入效果
圖一.png
圖二：銷毀驗(yàn)證
圖二.png
小結(jié)：當(dāng)前情況下destroyOnClose屬性不起作用
-
要消除的值在父組件被定義、在子組件中被使用
1交洗、父組件傳入的值只做子組件的初始值使用，值變化由子組件處理橡淑，并不回傳給父組件
父組件代碼
import React from 'react';
import { Modal, Input } from 'antd';
import './index.styl';
import Sub from '../Sub/index';
export default class Test extends React.PureComponent {
constructor(props) {
super(props);
this.state = {
loading: false,
visible: false,
value: ''
};
}
componentWillReceiveProps(nextProps) {
const self = this;
const { visible } = nextProps;
const visiblePre = self.state.visible;
if (visible && visible !== visiblePre) {
self.setState({ visible });
}
}
// 彈窗取消
handleCancel = () => {
const self = this;
self.setState({ visible: false });
self.props.handleCancel();
}
render() {
const self = this;
const {
visible,
value,
} = self.state;
return (
<Modal
visible={visible}
onOk={self.handleCancel}
onCancel={self.handleCancel}
title="destroyOnClose測(cè)試"
destroyOnClose={true}
>
<div>
<Sub
value={value}
/>
</div>
</Modal>
);
}
}
子組件代碼
import React from 'react';
import { Input } from 'antd';
export default class ImgDisplay extends React.PureComponent {
constructor(props) {
super(props);
this.state = {
value: props.value
};
}
handleChange = (e) => {
const self = this;
const value = e.target.value;
self.setState({ value });
}
render() {
const self = this;
const { value } = self.state;
return (
<Input
placeholder="子組件輸入"
value={value}
onChange={self.handleChange}
/>
);
}
}
在下方將展示輸入效果（圖一）及點(diǎn)擊取消按鈕后再次進(jìn)入此彈窗的顯示（圖二）
圖一：輸入效果
二圖一.png
圖二：銷毀驗(yàn)證
二圖二.png
2构拳、父組件傳值給子組件，并且此值的變化在父組件中做處理，子組件只負(fù)責(zé)展示
父組件代碼
import React from 'react';
import { Modal, Input } from 'antd';
import './index.styl';
import Sub from '../Sub/index';
export default class Test extends React.PureComponent {
constructor(props) {
super(props);
this.state = {
loading: false,
visible: false,
value: ''
};
}
componentWillReceiveProps(nextProps) {
const self = this;
const { visible } = nextProps;
const visiblePre = self.state.visible;
if (visible && visible !== visiblePre) {
self.setState({ visible });
}
}
// 彈窗取消
handleCancel = () => {
const self = this;
self.setState({ visible: false });
self.props.handleCancel();
}
// input輸入改變
handleChange = (e) => {
const self = this;
const value = e.target.value;
self.setState({ value });
}
render() {
const self = this;
const {
visible,
value,
} = self.state;
return (
<Modal
visible={visible}
onOk={self.handleCancel}
onCancel={self.handleCancel}
title="destroyOnClose測(cè)試"
destroyOnClose={true}
>
<div>
<Sub
value={value}
handleChange={self.handleChange}
/>
</div>
</Modal>
);
}
}
子組件代碼
import React from 'react';
import { Input } from 'antd';
export default class ImgDisplay extends React.PureComponent {
constructor(props) {
super(props);
this.state = {
value: ''
};
}
componentWillReceiveProps(nextProps) {
const self = this;
const { value } = nextProps;
const valuePre = self.state.value;
if (value && value !== valuePre) {
self.setState({ value });
}
}
// handleChange = (e) => {
// const self = this;
// const value = e.target.value;
// self.setState({ value });
// }
render() {
const self = this;
const { value } = self.props;
return (
<Input
placeholder="子組件輸入"
value={value}
onChange={self.props.handleChange}
/>
);
}
}
在下方將展示輸入效果（圖一）及點(diǎn)擊取消按鈕后再次進(jìn)入此彈窗的顯示（圖二）
圖一：輸入效果
3圖3.png
圖二：銷毀驗(yàn)證
3圖四.png
小結(jié)：當(dāng)父組件做值處理時(shí)置森，destroyOnClose屬性不起作用斗埂；當(dāng)子組件處理數(shù)值時(shí)destroyOnClose屬性能起到銷毀modal彈窗中值的作用
-
要消除的值在子組件被定義、在子組件中被使用
父組件代碼
import React from 'react';
import { Modal, Input } from 'antd';
import './index.styl';
import Sub from '../Sub/index';
export default class Test extends React.PureComponent {
constructor(props) {
super(props);
this.state = {
loading: false,
visible: false,
};
}
componentWillReceiveProps(nextProps) {
const self = this;
const { visible } = nextProps;
const visiblePre = self.state.visible;
if (visible && visible !== visiblePre) {
self.setState({ visible });
}
}
// 彈窗取消
handleCancel = () => {
const self = this;
self.setState({ visible: false });
self.props.handleCancel();
}
render() {
const self = this;
const {
visible,
} = self.state;
return (
<Modal
visible={visible}
onOk={self.handleCancel}
onCancel={self.handleCancel}
title="destroyOnClose測(cè)試"
destroyOnClose={true}
>
<div>
<Sub />
</div>
</Modal>
);
}
}
子組件代碼
import React from 'react';
import { Input } from 'antd';
export default class ImgDisplay extends React.PureComponent {
constructor(props) {
super(props);
this.state = {
value: ''
};
}
handleChange = (e) => {
const self = this;
const value = e.target.value;
self.setState({ value });
}
render() {
const self = this;
const { value } = self.state;
return (
<Input
placeholder="子組件輸入"
value={value}
onChange={self.handleChange}
/>
);
}
}
在下方將展示輸入效果（圖一）及點(diǎn)擊取消按鈕后再次進(jìn)入此彈窗的顯示（圖二）
圖一：輸入效果
4圖1.png
圖二：銷毀驗(yàn)證
4圖2.png
小結(jié)：在此情況下destroyOnClose屬性能起到銷毀modal彈窗中值的作用
-
總結(jié)
想要被消除的數(shù)據(jù)如果是在與modal相同的組件中做值的處理凫海，即值的動(dòng)態(tài)變化呛凶，那么當(dāng)關(guān)閉彈窗時(shí)destroyOnClose不會(huì)起作用消除當(dāng)前的值。而當(dāng)值處理行贪，即值的動(dòng)態(tài)變化在modal彈窗內(nèi)容下的子組件時(shí)漾稀，當(dāng)彈窗關(guān)閉時(shí)destroyOnClose起作用銷毀當(dāng)前值。
