javascript - react 如何销毁组件,并触发销毁事件?
本文介绍了javascript - react 如何销毁组件,并触发销毁事件?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
react 如何销毁组件并触发离场事件?
比如以下代码。
javascript :
const ComBox = () => {
const HideAni = () =>{
//这里如何触发销毁????
}
return (
<div>
<div onClick={()=> HideAni()}>销毁按钮</div>
<ReactCSSTransitionGroup
transitionName="example"
transitionLeaveTimeout={300}
>
<p>我是要销毁的内容</p>
</ReactCSSTransitionGroup>
{box}
</div>
)
}
CSS :
.example-leave {
opacity: 1;
}
.example-leave.example-leave-active {
opacity: 0.01;
transition: opacity 300ms ease-in;
}
当我点击 销毁按钮 的时候,如何才能销毁下面的内容,并触发离场动画?
解决方案
只要你把数据清除了,自然就会触发动画了.记住一点,我们只要操作数据就好,React会帮我们更新UI.
class ComBox extends Component {
state = {
content: 'ghgsdfs'
}
HideAni = () => {
this.setState({content: ''})
}
render() {
return (
<div>
<button onClick={()=> this.HideAni()}>销毁按钮</button>
<ReactCSSTransitionGroup
transitionName="example"
transitionEnterTimeout={500}
transitionLeaveTimeout={300}
>
{this.state.content ? <p>{this.state.content}</p> : ''}
</ReactCSSTransitionGroup>
</div>
)
}
}
这篇关于javascript - react 如何销毁组件,并触发销毁事件?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文