Запрашивать обратный вызов, когда пользователь пытается выйти - PullRequest
Новая
       65

Запрашивать обратный вызов, когда пользователь пытается выйти

0 голосов
/ 14 июля 2020

У меня есть страница, на которой есть вызов Webrt c между пользователями.

И я хочу, чтобы, когда пользователь пытается go перейти на другую страницу / перезагрузить страницу / выйти из браузера, там будет подсказка, спрашивающая его, уверен ли он, что хочет покинуть страницу, и если пользователь нажимает «да», я хочу, чтобы был обратный вызов.

В обратном вызове (не уверен, если уместно) i закроет одноранговые узлы и отключит все должным образом, так что вызов будет отключен, и пользователь больше не будет слышать звук, а другая сторона будет знать, что пользователь также отключился.

  • Чтобы сделать это на refre sh я видел функцию window.onunloaded

  • Возможно ли это даже при выходе из браузера?

  • Я видел Prompt возможность сделать это при изменении маршрута, но я не видел, как вставить туда обратный вызов при подтверждении.

Я буду рад получить один рабочий пример, так как он кажется слишком сложным для такая странная штука ..

Спасибо. * 1 025 *

1 Ответ

1 голос
/ 14 июля 2020

Обработка событий навигации React

Я думаю, что вы ищете getUserConfirmation prop компонента BrowserRouter.

Функция, переданная в prop может выглядеть так (пример TypeScript): 

const getUserConfirmation = (
    message: string,
    callback: (ok: boolean) => void
): void => {
    const answer = window.confirm("Do you want to navigate away?");

    // do something depending on which button was pressed

    callback(answer); // allow or disallow React's navigation
};

В том месте, где вы определяете свои маршруты: 

<BrowserRouter getUserConfirmation={getUserConfirmation}>
    ... routes go here ...
</BrowserRouter>

Вам все равно нужно будет использовать <Prompt>, хотя: 

<Prompt
     when={boolean}
     message="This string will be supplied in the confirmation function above as second parameter"
/>

Обработка обновлений браузера sh

Вы можете добавить такой обратный вызов 

window.onbeforeunload = () => {
    // some non-blocking logic

    return true;
};

После того, как он вам больше не понадобится , вы можете очистить: 

window.onbeforeunload = null;

Глядя на этот вопрос SO , не представляется возможным из коробки захватить ответ пользователя на собственное окно подтверждения в onbeforeunload.

Вероятно, window.onunload будет подходящим местом для очистки ваших данных, поскольку это, скорее всего, означает, что пользователь решил покинуть страницу.

...