zoukankan      html  css  js  c++  java
  • react中简单倒计时跳转

    其实在react中实现倒计时的跳转方法有很多中,其中我认为较为好用的就是通过定时器更改state中的时间值。

    首先在constructor中设置10秒的时间值:

    constructor () {
        super()
        this.state={
          seconds: 10,
        };
      }
    

    然后在componentDidMount中添加定时器:

    componentDidMount () {
      let timer = setInterval(() => {
        this.setState((preState) =>({
          seconds: preState.seconds - 1,
        }),() => {
          if(this.state.seconds == 0){
            clearInterval(timer);
          }
        });
      }, 1000)
    }

    然后在render中添加判断跳转

    if (this.state.seconds === 0) {
        window.location.href='http://www.cnblogs.com/a-cat/';
    }
    

    这种就可以完成倒计时跳转了!

  • 相关阅读:
    触发器
    dubbox 及 zookeeper的安装与启动
    负载均衡
    SOA架构
    获取短信验证码
    分步式
    saoruo
    Ngx
    redies技术
    Springboot开发特点
  • 原文地址:https://www.cnblogs.com/a-cat/p/9607980.html
Copyright © 2011-2022 走看看