Как Facebook может показать пользовательское модальное окно для несохраненных изменений в их приложении?

Question

Меня интересуют решения, использующие React.Мне удалось найти только примеры, показывающие предупреждения на уровне браузера, но я не смог найти примеров для представления пользовательского модального окна, когда пользователь уходит со страницы с несохраненными данными.

Answer 1

Существует событие с именем onbeforeunload, которое живет в глобальном объекте windows.

componentDidMount() {
  window.addEventListener('onbeforeunload', () => {
    //show your React modal
    this.setState({ isModalShown: true });
    if (this.state.choose) {
      return undefined;
    }
  });
 }

render() {
  return  (
    <Modal open={this.state.isModalShown}>
      <p>Do you wish to continue?</p>
      <button onClick={() => this.setState({ choose: true })}>Cancel</button>
      <button onClick={() => this.setState({ choose: false })}>Ok</button>
    </Modal>
  );
}

Будьте осторожны с поддержкой браузеров, так как не все браузеры ведут себя одинаково https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeunload

Весьма вероятно, что решение facebook довольно продвинутое и использует обходные пути для разных браузеров.