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/';
}
这种就可以完成倒计时跳转了!
react中简单倒计时跳转的更多相关文章
- react实现简单倒计时
		今天遇到一个简单的小功能,看网上的一些方法感觉不太适合,所以就手敲了一个,直接上代码!!! import React, { Component } from 'react'; class NoTime ... 
- react中路由的跳转
		1.react-router-dom 使用react-router-dom 4.4.2 在页面中直接使用 引入 i mport { Link } from 'react-router-dom' 使用 ... 
- react中界面跳转 A界面跳B界面,返回A界面,A界面状态保持不变 redux的state方法
		在上一篇文章中说过了react中界面A跳到B,返回A,A界面状态保持不变,上篇中使用的是传统的localStorage方法,现在来使用第二种redux的state方法来实现这个功能 现在我刚接触red ... 
- JavaScript学习笔记-简单的倒计时跳转页面
		<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ... 
- js 倒计时跳转
		用js实现简单的倒计时结束页面跳转效果,主要用到setInterval()和clearInterval()方法,页面跳转使用window.location.href = " ".倒 ... 
- React Hooks简单业务场景实战(非源码解读)
		前言 React Hooks 是React 16.7.0-alpha 版本推出的新特性.从 16.8.0 开始,React更稳定的支持了这一新特性. 它可以让你在不编写 class 的情况下使用 st ... 
- React中diff算法的理解
		React中diff算法的理解 diff算法用来计算出Virtual DOM中改变的部分,然后针对该部分进行DOM操作,而不用重新渲染整个页面,渲染整个DOM结构的过程中开销是很大的,需要浏览器对DO ... 
- react实战系列 —— React 中的表单和路由的原理
		其他章节请看: react实战 系列 React 中的表单和路由的原理 React 中的表单是否简单好用,受控组件和非受控是指什么? React 中的路由原理是什么,如何更好的理解 React 应用的 ... 
- 纯JSP实现简单登录跳转
		1.JSP介绍 JSP即Java Server Pages,JSP技术使用Java编程语言编写类XML的tags和scriptlets,来封装产生动态网页的处理逻辑.网页还能通过tags和script ... 
随机推荐
- [springboot 开发单体web shop] 3. 用户注册实现
			目录 用户注册 ## 创建数据库 ## 生成UserMapper ## 编写业务逻辑 ## 编写user service UserServiceImpl#findUserByUserName 说明 U ... 
- 零基础攻略!如何使用kubectl和HPA扩展Kubernetes应用程序
			现如今,Kubernetes已经完全改变了软件开发方式.Kubernetes作为一个管理容器化工作负载及服务的开源平台,其拥有可移植.可扩展的特性,并促进了声明式配置和自动化,同时它还证明了自己是管理 ... 
- 第三十九章 POSIX信号量与互斥锁
			POSIX信号量相关函数 sem_open 功能: initialize and open a named semaphore 原型: sem_t *sem_open(const char *name ... 
- CSPS模拟 42
			T3数位$dp$还没改完啊 哭了 T1 对$DAG$里所有点求他能到达的点的数量 考试时算了$bitset$内存扛不住,yy了个线段树合并上去 没有A不是因为被卡了,而是数组又开小了.. 我以为不能卡 ... 
- 基于代码生成器的快速开发平台 JEECG
			JEECG是一款基于代码生成器的J2EE快速开发平台,开源界“小普元”超越传统商业企业级开发平台.引领新的开发模式(Online Coding模式(在线开发)->代码生成器模式->手工ME ... 
- setAccessible()方法
			在java代码中,我们经常使用private来控制类中成员变量的访问权限,在类的外边我们一般使用get方法获取私有成员变量的值,但是如果类中没有get方法,但我们又想获取该类私有成员变量的值,该怎么办 ... 
- html5 svg实现不规则形状图片触发事件
			html5 svg实现不规则形状图片触发事件<pre><!DOCTYPE html><html lang="en"> <head> ... 
- 数据仓库ETL案例学习(一)
			来自课程案例学习 某跨国食品超市的信息管理系统,每天都会记录成千上万条各地连锁超市的销售数据.基于大数据的背景,该公司的管理层决定建立FoodMart数据仓库,期望能从庞大的数据中挖掘出有商业价值 ... 
- thinkphp分页样式css代码
			<style type="text/css"> .Pagination a:hover,.current{background-color: #f54281;borde ... 
- ESP8266 智能配网 断电重连
			ESP8266 智能配网 断电重连 #include <ESP8266WiFi.h> bool autoConfig() { WiFi.begin(); for (int i = 0; i ... 
