javascript - onbeforeunload, react bileşeni içinde çalışmıyor

Kullanıcının veri düzenleyebileceği basit bir react bileşenim var. Değiştirilebilecek değerler biraz zaman alabileceğinden, kaydedilmemiş değişiklikler varsa sayfadan ayrılmadan önce kullanıcıya onay sormak istiyorum.

Bileşenin yapıcısında şunu çağırıyorum:

window.addEventListener("beforeunload", this.handleWindowBeforeUnload);

Ben de denedim

window.onbeforeunload = this.handleWindowBeforeUnload;

handleWindowBeforeUnload şöyle görünüyor:

private handleWindowBeforeUnload = (ev: BeforeUnloadEvent): string => {
    return "Unsaved changes. Are you sure?";
}

Ancak, bir kesme noktası ayarlamak çalışır. Yine de, gitmenin tehlikeli olabileceğini gösteren bir uyarı çıkmıyor. Ayrıca en son Firefox ile denedim ama hiçbir şey olmadı. MDN'de belirtildiği gibi ben de denedim

// Cancel the event as stated by the standard.
e.preventDefault();

// Chrome requires returnValue to be set.
e.returnValue = '';

// return something to trigger a dialog
return null; // ''; // "Do something"

Hâlâ hiçbir şey olmuyor. Burada neyi yanlış yapıyorum?

Cevap #1

Yöntemi yaşam döngüsü yöntemlerinin içinde çağırmanız gerekecek:

componentDidMount() {
  window.addEventListener("beforeunload", this.handleWindowBeforeUnload);
}

componentWillUnmount() {
  window.removeEventListener("beforeunload", this.handleWindowBeforeUnload);
}

Cevap #2

Modern React Çözümü

useEffect(() => {
  const preventUnload = (event: BeforeUnloadEvent) => {
    // NOTE: This message isn't used in modern browsers, but is required
    const message = 'Sure you want to leave?';
    event.preventDefault();
    event.returnValue = message;
  };

  window.addEventListener('beforeunload', preventUnload);

  return () => {
    window.removeEventListener('beforeunload', preventUnload);
  };
}, []);

Lint yapılandırmanıza bağlı olarak buna da ihtiyacınız olabilir:

// eslint-disable-next-line no-param-reassign
event.returnValue = message;

İlgili makaleler