{this.state.dlgTipTxt}}/>"."/> {this.state.dlgTipTxt}}/>".">

Home >Web Front-end >Front-end Q&A >How to set the time to close the page in react

How to set the time to close the page in react

藏色散人
藏色散人Original
2023-01-03 14:19:111135browse

How to set the page closing time in react: 1. Set the time value of 5 seconds in the constructor; 2. Add a timer in componentDidMount; 3. Add judgment in render, the code is like "089c8aa2b7a473668868f3343bcbb19f{this.state.dlgTipTxt}a1cb88e6789f399807801ea3799938af}/>".

How to set the time to close the page in react

The operating environment of this tutorial: Windows 10 system, react18.0.0 version, Dell G3 computer.

How to set the time to close the page in react?

React to implement a simple countdown to close the page

First set the time value of 5 seconds in the constructor

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

Add a timer to 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)
}

Add judgment in render

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

Recommended learning: "react video tutorial"

The above is the detailed content of How to set the time to close the page in react. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn