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

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

功能需求

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

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



原理

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

使用setTimeout定时


代码

主要代码

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

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

  1. componentDidMount() {
  2. this.showSaveCover();
  3. }
  4.  
  5. showSaveCover() {
  6. this.setState({
  7. isWarning: true
  8. });
  9. this.hideSaveCover();
  10. }
  11.  
  12. hideSaveCover() {
  13. var self = this;
  14. if (this.timer) {
  15. clearTimeout(this.timer);
  16. }
  17. this.timer = setTimeout(() => {
  18. self.setState({
  19. isWarning: false
  20. });
  21. },1000);
  22. }








DEMO地址(动手试一试)

猜你在找的React相关文章