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 ...
随机推荐
- Java 生成在线二维码 以Base64返回前端、或者写入到本地磁盘
思路 现阶段遇到这样一个问题,在原有的产品上加入线下优惠券模式,用户领取优惠券以后,获取到一个唯一的ID作为领取凭证,但是在线下用扫码枪进行扫码的时候,总不能让人手动输入吧 于是乎就想出了一个办法,后 ...
- 条款03:尽肯使用const
定义常量 define 是一个Compile-Time的概念,它的生命周期止于编译器期,它存在与程序的代码段,在实际程序中它只是一个常数.一个命令中的参数.并没有实际的存在 const常量存在于程序的 ...
- 转载: ubuntu13.04下载android4.0.1源码过程
转自:http://blog.csdn.net/zhanglongit/article/details/9263009,中间有些不行的地方进行了些小修改. 最初我参考的是老罗的博客http://blo ...
- Nginx 的进程结构,你明白吗?
Nginx 进程结构 这篇文章我们来看下 Nginx 的进程结构,Nginx 其实有两种进程结构: 单进程结构 多进程结构 单进程结构实际上不适用于生产环境,只适合我们做开发调试使用.因为在生产环境中 ...
- 「分治」-cdq分治
cdq分治是一种分治算法: 一种分治思想,必须离线,可以用来处理序列上的问题(比如偏序问题),还可以优化1D/1D类型的DP.• 算法的大体思路我们可以用点对来描述.假定我们有一个长度为n的序列,要处 ...
- 最新JetBrains PyCharm 使用教程--安装教程(一)
安装过程 Pycharm 激活码 license server选项里边输入:http://intellij.mandroid.cn/
- 手写Spring框架,加深对Spring工作机制的理解!
在我们的日常工作中,经常会用到Spring.Spring Boot.Spring Cloud.Struts.Mybatis.Hibernate等开源框架,有了这些框架的诞生,平时的开发工作量也是变得越 ...
- 「每日五分钟,玩转 JVM」:GC 概览
前言 GC(Garbage Collection)是我们在学习 JVM 的过程中不可避免的一道坎,接下来,我们就来系统的学习一下 GC. 做一件事情之前,我们一定要去知道我们为什么要去做,这里不仅仅指 ...
- php session获取不到的解决方法
php session获取不到的解决方法 因为sesson数据是存在服务器端的硬盘一般临时空间不足 /tmp/ 1 这个需要清空下系统盘就可以了2 你可以在空间充足的地方mkdir 文件夹——你可以使 ...
- ASP.NET Core 1.0: Using Entity Framework Core
伴随着ASP.NET Core 1.0发布的还有Entity Framework Core 1.0; 官方文档链接:https://docs.efproject.net/en/latest/platf ...