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 ...
随机推荐
- js原生图片懒加载 或 js原生图片预加载,html标签自定义属性
使用原声js来实现图片预加载,或图片懒加载,小伙伴们可以根据项目需要来结合vue或者是react来进行修改. 一.什么是图片懒加载或什么是图片预加载 当访问一个页面的时候,先把img元素或是其他元素的 ...
- oracle数据库锁表,什么SQL引起了锁表?ORACLE解锁的方法
--查询数据库锁表记录 select sess.sid, sess.serial#, lo.oracle_username, lo.os_user_name, ao.object_name, lo.l ...
- 设计模式之代理模式(Java)
简介 代理模式出场率真的相当的高,几乎所有框架中无一例外都用到了代理模式,所以了解一下收益还是很高的. 代理模式是什么 如果用一句话来描述代理模式: 代理模式就是为其他对象提供一种代理以控制对被代理对 ...
- nginx篇最初级用法之访问认证
1打开conf下的配置文件 在server 之下 location 之上加入 auth_basic "Input Password:"; 弹出的提示信息 auth_basic ...
- RocketMQ实战:生产环境中,autoCreateTopicEnable为什么不能设置为true
1.现象 很多网友会问,为什么明明集群中有多台Broker服务器,autoCreateTopicEnable设置为true,表示开启Topic自动创建,但新创建的Topic的路由信息只包含在其中一台B ...
- [考试反思]0718 NOIP模拟测试5
最后一个是我...rank#11 rank#1和rank#2被外校大佬包揽了. 啊...考的太烂说话底气不足... 我考场上在干些什么啊!!! 20分钟“切”掉T2,又27分钟“切”掉T1 切什么切, ...
- 近期学习es6后对变量提升及let和const的一点思考
1.变量提升:(创建->初始化)-->赋值-->修改 就是说,以var声明的变量,它的声明会被提升到当前作用域的顶端(注意是变量声明提升,变量的赋值没有提升) //在if语句中也会提 ...
- 【WPF on .NET Core 3.0】 Stylet演示项目 - 简易图书管理系统(3) - 使用Conductor切换页面
前两章中, 我们已经实现了这个图书管理系统的登录窗口, 并实施了完善的单元测试. 该是时候回过头来关注我们的主窗口了. 一个功能丰富的系统一般会有多个页面, 我们图书管理系统虽然是"简易&q ...
- 如何处理消息队列消费过程中的重复消息&如何实现幂等性
什么是幂等 幂等本来是数学上的概念,它的定义是这样的: 如果一个函数 f(x) 满足:f(f(x)) = f(x),则函数 f(x) 满足幂等性. 在计算机领域用来描述一个操作.方法或者服务.一个幂等 ...
- ATM功能实现项目
一.模拟实现一个ATM + 购物商城程序 1.额度 15000或自定义2.实现购物商城,买东西加入 购物车,调用信用卡接口结账3.可以提现,手续费5%4.支持多账户登录5.支持账户间转账6.记录每月日 ...