在设定的时间后从 DOM 中删除元素 [英] Removing element from DOM after set amount of time

问题描述

我正在尝试找出在触发事件后从 DOM 中删除元素的 React 方法.

我试图在 onClick={this.props.handleCopyFact} 被触发时发出警报 (copySuccess)，然后在 5 秒后淡出该警报.每个组件的状态都在父组件中设置.

这是我的组件的代码:

module.exports = React.createClass({渲染:函数(){var copy = null;如果(！this.props.copying && !this.props.editing){复制 = (<div className="copy-fact-container" onClick={this.props.handleCopyFact}><i className="icon-copy"></i><span>复制</span>

);}var copySuccess = null;如果(this.props.copySuccess){复制成功 = (<div className="复制成功"><div><i className="icon icon-clipboard"></i></div><p className="heading">复制到剪贴板</p>

);}返回 (<div className="row-body"onMouseEnter={this.props.toggleCopyFact}onMouseLeave={this.props.toggleCopyFact}><MDEditor editting={this.props.editing}内容={this.props.content}changeContent={this.props.changeContent}/>{复制}{复制成功}

);}});

解决方案

一种方法是创建一个 Expire 组件，它会在延迟后隐藏其子项.您可以将它与 CSSTransitionGroup 结合使用来执行淡出行为.

jsbin

用法:

render: function(){return <Expire delay={5000}>这是一个警报</Expire>}

组件:

var Expire = React.createClass({getDefaultProps:函数(){返回{延迟:1000}；},getInitialState: 函数(){返回{可见:真}；},componentWillReceiveProps:函数(nextProps){//如果孩子发生变化，则重置计时器如果(nextProps.children !== this.props.children){this.setTimer();this.setState({visible: true});}},componentDidMount:函数(){this.setTimer();},设置定时器:函数(){//清除任何现有的计时器this._timer != null ?clearTimeout(this._timer) : null;//在 `delay` 毫秒后隐藏this._timer = setTimeout(function(){this.setState({visible: false});this._timer = null;}.bind(this), this.props.delay);},componentWillUnmount:函数(){clearTimeout(this._timer);},渲染:函数(){返回 this.state.visible?<div>{this.props.children}</div>:<跨度/>;}});

I'm trying to figure out the React way to remove an element from the DOM after an event if fired.

I am attempting to flash an alert (copySuccess) when onClick={this.props.handleCopyFact} is fired, and then fade that alert out after 5 seconds. The state of each of these are set within a parent component.

Here is the code for my component:

module.exports = React.createClass({

render: function() {

var copy = null;
if (!this.props.copying && !this.props.editting) {
  copy = (
    <div className="copy-fact-container" onClick={this.props.handleCopyFact}>
      <i className="icon-copy"></i>
      <span>Copy</span>
    </div>
    );

}

var copySuccess = null;
if (this.props.copySuccess) {
  copySuccess = (
    <div className="copy-success">
      <div><i className="icon icon-clipboard"></i></div>
      <p className="heading">Copied to Clipboard</p>
    </div>
    );
}

return (
  <div className="row-body"
    onMouseEnter={this.props.toggleCopyFact}
    onMouseLeave={this.props.toggleCopyFact}>
    <MDEditor editting={this.props.editting}
      content={this.props.content}
      changeContent={this.props.changeContent}/>
  {copy}
  {copySuccess}
  </div>
);
}
});

解决方案

One way is to create an Expire component which will hide its children after a delay. You can use this in conjunction with a CSSTransitionGroup to do the fade out behavior.

jsbin

Usage:

render: function(){
    return <Expire delay={5000}>This is an alert</Expire>
}

The component:

var Expire = React.createClass({
  getDefaultProps: function() {
    return {delay: 1000};
  },
  getInitialState: function(){
    return {visible: true};
  },
  componentWillReceiveProps: function(nextProps) {
    // reset the timer if children are changed
    if (nextProps.children !== this.props.children) {
      this.setTimer();
      this.setState({visible: true});
    }
  },
  componentDidMount: function() {
      this.setTimer();
  },
  setTimer: function() {
    // clear any existing timer
    this._timer != null ? clearTimeout(this._timer) : null;

    // hide after `delay` milliseconds
    this._timer = setTimeout(function(){
      this.setState({visible: false});
      this._timer = null;
    }.bind(this), this.props.delay);
  },
  componentWillUnmount: function() {
    clearTimeout(this._timer);
  },
  render: function() {
    return this.state.visible 
           ? <div>{this.props.children}</div>
           : <span />;
  }
});

这篇关于在设定的时间后从 DOM 中删除元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！