React中怎樣實(shí)現(xiàn)onbeforeunload功能

小樊
81
2024-10-10 02:10:38
欄目: 編程語言

在React中，可以使用window.addEventListener方法來添加beforeunload事件監(jiān)聽器。當(dāng)用戶試圖離開當(dāng)前頁面時(shí)，會(huì)觸發(fā)beforeunload事件。你可以在事件處理函數(shù)中執(zhí)行一些操作，例如彈出確認(rèn)對(duì)話框。

下面是一個(gè)簡單的示例：

import React, { useEffect } from 'react';

function App() {
  useEffect(() => {
    // 添加 beforeunload 事件監(jiān)聽器
    const handleBeforeUnload = (event) => {
      // 設(shè)置返回值，這將觸發(fā)瀏覽器彈出一個(gè)確認(rèn)對(duì)話框
      event.returnValue = '你確定要離開此頁面嗎？';
    };

    window.addEventListener('beforeunload', handleBeforeUnload);

    // 在組件卸載時(shí)移除事件監(jiān)聽器
    return () => {
      window.removeEventListener('beforeunload', handleBeforeUnload);
    };
  }, []);

  return (
    <div>
      <h1>React beforeunload 示例</h1>
    </div>
  );
}

export default App;

請(qǐng)注意，某些瀏覽器可能不會(huì)顯示自定義的確認(rèn)對(duì)話框，而是顯示默認(rèn)的對(duì)話框。這是為了防止濫用beforeunload事件。

0 踩