首页 > web前端 > 前端问答 > react关闭页面时间怎么设置

react关闭页面时间怎么设置

藏色散人
发布: 2023-01-04 16:46:09
原创
1112 人浏览过

react设置关闭页面时间的方法:1、在constructor中设置5秒的时间值;2、在componentDidMount中添加定时器;3、在render中添加判断即可,代码如“{this.state.dlgTipTxt}}/>”。

react关闭页面时间怎么设置

本教程操作环境:Windows10系统、react18.0.0版、Dell G3电脑。

react关闭页面时间怎么设置?

react中实现简单倒计时关闭页面

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

constructor (props) {
   super(props)
   this.state={
     seconds: 5,
     dlgTipTxt: '5s后关闭页面'
   };
 }
登录后复制

componentDidMount中添加定时器

componentDidMount () {
  let timer = setInterval(() => {
    this.setState((preState) =>({
      seconds: preState.seconds - 1,
      dlgTipTxt: `${preState.seconds - 1}s后自动关闭`,
    }),() => {
      if(this.state.seconds == 0){
        clearInterval(timer);
        window.close()
      }
    });
  }, 1000)
}
登录后复制

render中添加判断

render() {
return (
<Result
status="403"
title="403"
subTitle="抱歉你没有权限访问页面"
extra={
<Button>
{this.state.dlgTipTxt}
</Button>
}
/>
)
}
登录后复制

推荐学习:《react视频教程

以上是react关闭页面时间怎么设置的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板