Reactでページを閉じる時間を設定する方法

藏色散人
リリース: 2023-01-04 16:46:09
オリジナル
1069 人が閲覧しました

react でページを閉じる時間を設定する方法: 1. コンストラクターで 5 秒の時間値を設定します; 2.componentDidMount にタイマーを追加します; 3. レンダリングで判定を追加します。コードは "< ; 結果 status="403"title="403"subTitle="..."extra={}/>"。

Reactでページを閉じる時間を設定する方法

このチュートリアルの動作環境: Windows 10 システム、react18.0.0 バージョン、Dell G3 コンピューター。

反応でページを閉じる時間を設定するにはどうすればよいですか?

ページを閉じるための単純なカウントダウンを実装するために反応します

最初にコンストラクターで 5 秒の時間値を設定します

constructor (props) {
   super(props)
   this.state={
     seconds: 5,
     dlgTipTxt: &#39;5s后关闭页面&#39;
   };
 }
ログイン後にコピー

Add 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() {
return (
<Result
status="403"
title="403"
subTitle="抱歉你没有权限访问页面"
extra={
<Button>
{this.state.dlgTipTxt}
</Button>
}
/>
)
}
ログイン後にコピー

推奨学習:「react ビデオ チュートリアル

以上がReactでページを閉じる時間を設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!