react组件 使用setTimeout 定时隐藏 (有demo)

前端之家收集整理的这篇文章主要介绍了react组件 使用setTimeout 定时隐藏 (有demo)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

功能需求

1>初始化时 展示 1次 图片,1秒后,隐藏图片

2>点击 按钮 展示 1次 图片1秒后隐藏图片



原理

绑定this本身,使用匿名函数

使用setTimeout定时


代码

主要代码

1>componentDidMount 加载完毕以后,执行一次

2>showSaveCover 展示后,立即执行隐藏

  componentDidMount() {
    this.showSaveCover();
  }

  showSaveCover() {
    this.setState({
      isWarning: true
    });
    this.hideSaveCover();
  }

  hideSaveCover() {
    var self = this;
    if (this.timer) {
      clearTimeout(this.timer);
    }
    this.timer = setTimeout(() => {
      self.setState({
        isWarning: false
      });
    },1000);
  }








DEMO地址(动手试一试)

猜你在找的React相关文章