React - как открыть модальное окно, когда пользователь пытается перезагрузить или закрыть окно / вкладку?

Я пытаюсь запустить модальное окно, когда пользователь пытается перезагрузить страницу, посетить новый URL-адрес или закрыть окно / вкладку браузера.

На данный момент код успешно запускает модальное окно, но также появляется окно предупреждения по умолчанию, от которого я хочу избавиться:

React - как открыть модальное окно, когда пользователь пытается перезагрузить или закрыть окно / вкладку?

Модальное окно отображается под окном предупреждений по умолчанию (с использованием FireFox).

Код:

componentDidMount() {
    window.addEventListener('beforeunload', this.onUnload)
  }

  componentWillUnmount() {
    window.removeEventListener('beforeunload', this.onUnload)
  }

  onUnload(event) {
    event.preventDefault();
    this.setState({ modalIsOpen: true })
  }
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
0
1 546
1

Ответы 1

Для этого может быть более рекомендуемый способ, но переопределение функции alert должно работать:

onUnload(event) {
    event.preventDefault();
    const nativeAlert = window.alert
    window.alert = console.info // Temporarily override the alert function
    this.setState({ modalIsOpen: true })
    window.alert = nativeAlert // Restore it to default
}

Спасибо за ввод, но похоже, что предупреждение по умолчанию все еще отображается

doctopus 20.07.2018 08:15

Для меня он не показывает предупреждение по умолчанию, но страница все равно перезагружается.

Mega Proger 12.04.2020 21:09

Другие вопросы по теме