antd|antd Modal组件销毁属性使用
Modal组件destroyOnClose属性
destroyOnClose属性在antd文档上标写的说明时关闭时销毁 Modal 里的子元素，默认值为false。有关antd Modal相关参见下方链接
https://ant.design/components/modal-cn/
此属性值不能对每种类型的组件值传递都适用，列出下面几种情况，并展示出效果，以作参考展示该属性的使用范围，下面所说的父组件表示为包含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 = https://www.it610.com/article/e.target.value;
self.setState({ value });
}
render() {
const self = this;
const {
visible,
value,
} = self.state;
return (
在下方将展示输入效果（图一）及点击取消按钮后再次进入此弹窗的显示（图二）
图一：输入效果
文章图片
图一.png 图二：销毁验证
文章图片
图二.png 小结：当前情况下destroyOnClose属性不起作用
- 要消除的值在父组件被定义、在子组件中被使用
父组件代码
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 (
子组件代码
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 = https://www.it610.com/article/e.target.value;
self.setState({ value });
}
render() {
const self = this;
const { value } = self.state;
return (
);
}
}
【antd|antd Modal组件销毁属性使用】在下方将展示输入效果（图一）及点击取消按钮后再次进入此弹窗的显示（图二）
图一：输入效果
文章图片
二图一.png 图二：销毁验证
文章图片
二图二.png 2、父组件传值给子组件，并且此值的变化在父组件中做处理，子组件只负责展示
父组件代码
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 = https://www.it610.com/article/e.target.value;
self.setState({ value });
}
render() {
const self = this;
const {
visible,
value,
} = self.state;
return (
子组件代码
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 = https://www.it610.com/article/e.target.value;
//self.setState({ value });
// }
render() {
const self = this;
const { value } = self.props;
return (
);
}
}
在下方将展示输入效果（图一）及点击取消按钮后再次进入此弹窗的显示（图二）
图一：输入效果
文章图片
3图3.png 图二：销毁验证
文章图片
3图四.png 小结：当父组件做值处理时，destroyOnClose属性不起作用；当子组件处理数值时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 (
子组件代码
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 = https://www.it610.com/article/e.target.value;
self.setState({ value });
}
render() {
const self = this;
const { value } = self.state;
return (
);
}
}
在下方将展示输入效果（图一）及点击取消按钮后再次进入此弹窗的显示（图二）
图一：输入效果
文章图片
4图1.png 图二：销毁验证
文章图片
4图2.png 小结：在此情况下destroyOnClose属性能起到销毁modal弹窗中值的作用
- 总结
推荐阅读
- 基于|基于 antd 风格的 element-table + pagination 的二次封装
- 动态组件与v-once指令
- vue组件中为何data必须是一个函数（）
- (六)Component初识组件
- Spring|Spring Boot 自动配置的原理、核心注解以及利用自动配置实现了自定义 Starter 组件
- vuex|vuex 基础结构
- SwiftUI|SwiftUI iOS 瀑布流组件之仿CollectionView不规则图文混合(教程含源码)
- Vue组件之事件总线和消息发布订阅详解
- vue.js组件开发
- TCP组件设计篇（详细设计）