Компонент Custom Prompt в реакции-маршрутизатор-дом. Предотвращение перезагрузки страницы - PullRequest
Новая
       5

Компонент Custom Prompt в реакции-маршрутизатор-дом. Предотвращение перезагрузки страницы

0 голосов
/ 24 марта 2020

Я использую Prompt отact-router-dom, чтобы создать свой пользовательский компонент для предотвращения выхода пользователей из формы Popup. 

const SignUpForm = () => {

  const { fields, onChange, onSubmit } = useFormState();

  const isEmpty = Object.keys(fields).length === 0;

  usePreventReload(!isEmpty);

  const promptMessage = useMemo(() => JSON.stringify({ fields }), [fields]);

  return (
    <form
      onSubmit={onSubmit}
      noValidate
      autoComplete="off"
    >
      <h2>Sign Up</h2>
      <Prompt when={!isEmpty} message={promptMessage} />
      <TextField
        label="First Name"
        name="firstName"
        onChange={onChange}
      />
        ...

      <Button type="submit" variant="contained" color="secondary">
        Send
      </Button>
    </form>
  );
};

Если вы ничего не вводите в форму, всплывающее окно можно закрыть без проблем. И когда вы заполните какое-либо значение в любом поле и затем попытаетесь закрыть всплывающее окно, вы увидите всплывающее окно с предупреждением о том, что вы можете потерять данные. Это прекрасно работает, за исключением одного случая - перезагрузка страницы. Для этого я использую слушатель «beforeunload», но в этом случае мы можем использовать только системный диалог. Но возможно ли в этом случае использовать пользовательский компонент?

Я создал простую демонстрацию, чтобы вы лучше поняли - https://sin9k.com/custom-prompt

Кто-нибудь знает Обходной путь для этого случая?

1 Ответ

1 голос
/ 24 марта 2020

Вы можете захватить событие окна "beforeUnload", чтобы сделать это изначально, как показано ниже

, поэтому в componentDidMount вы добавляете этот прослушиватель событий как 

window.addEventListener('beforeunload', this.pageRefreshFunction);

Затем в componentWillUnmount вы можете удалить этот прослушиватель событий потому что вы не хотите оставлять его там, когда пользователь go на других страницах, таких как 

 window.removeEventListener('beforeunload', this.pageRefreshFunction);

, а затем в pageRefreshFunction должен быть триггер всплывающего окна

Но согласно ресурсам ниже пользовательского всплывающего окна больше не разрешены, и вы можете использовать только собственные настройки браузера c всплывающие окна

https://developers.google.com/web/updates/2016/04/chrome-51-deprecations#remove_custom_messages_in_onbeforeunload_dialogs

https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event

...