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 ...
随机推荐
- python3openpyxl库的简单使用
python3操作表格有很多库,现在主要给大家介绍一下我比较喜欢用的openpyxl库,安装直接pip安装,对pip安装有疑问可以参考我有关于pip使用的文章. wb=Workbook()#新建表格 ...
- MySQL查询-分组取组中某字段最大(小)值所有记录
最近做东西的时候,用到一个数据库的查询.将记录按某个字段分组,取每个分组中某个字段的最大值的所有记录.举栗子来说. 已知分数表“score”,包含字段“id", "name&quo ...
- Git学习以及使用
最近学习了下git的使用,不得不感叹真的是甩了svn几条街 官网下载实在太慢,附加一个网站方便大家下载https://github.com/waylau/git-for-win 安装好后打开Git B ...
- 大事祭——MiserWeyte
2019.9.10 QHDYZ组建信奥集训队祭(我哪知道这个鶸学校为啥这个时候组队) 2019.9.11 成为集训队毒瘤出题人祭 2019.9.21 博客界面优化祭(终于不是白底蓝框了)“那个拿剑的就 ...
- 一句话CF
目录 \(\bf {Round \ \#500 \ (Div. \ 1)}\) \(\bf {Round \ \#589 \ (Div. \ 2)}\) \(\bf {Avito \ Cool \ C ...
- 如何在Vue-cli项目中使用JTopo
1.前言 jTopo(Javascript Topology library)是一款完全基于HTML5 Canvas的关系.拓扑图形化界面开发工具包.其体积小,性能优异,由一群开发爱好者来维护.唯一感 ...
- numpy---python数据分析
最后大图可点开保存 文章目录 最后大图可点开保存 学习目标 3.1.1Numpy介绍 3.1.2 ndarray介绍 3.1.3 ndarray与Python原生list运算效率对比 3.1.4 nd ...
- Okhttp3源码解析
首先是Okhttp的使用: //缓存文件夹 File cacheFile = new File(getExternalCacheDir().toString(), "cache") ...
- Java设计模式(20):命令模式
本文源码:GitHub·点这里 || GitEE·点这里 一.生活场景 1.场景描述 智能电脑的品牌越来越多,由此诞生了一款电脑控制的APP,万能遥控器,用户在使用遥控器的时候,可以切换为自家电视的品 ...
- [ISE调试] 在ISE调试过程中,遇到过的warning以及消除办法
1.在generate的过程中,在Map环节遇到了下面这个warning 意思:告诉你是黑盒子,而且他本来在设计里面就是黑盒子. 解决办法:点击图中的,会弹出一个代码文件,是声明这个IP核的文件,代码 ...