Реагируйте с машинописью, закрывайте вкладку / окна - PullRequest
Новая
       32

Реагируйте с машинописью, закрывайте вкладку / окна

2 голосов
/ 31 марта 2019

Мне нужно, чтобы пользовательское диалоговое окно появлялось, когда пользователь закрывает вкладку или окно браузера.Я попытался написать компонент, который оборачивает мое приложение.Вот как я пытался: 

import * as PropTypes from 'prop-types';
import * as React from 'react';
import WindowsCloseDialog from './desktop/windowsClose.dialog';

interface IProps
{
    onBeforeunload?: () => void;
}

interface IState
{}

const Dialog = (): JSX.Element => <WindowsCloseDialog />

class Beforeunload extends React.Component<IProps, IState>
{
    // Things to do before unloading/closing the tab
    doSomethingBeforeUnload = () =>
    {
        // Do something
    }

    // Setup the `beforeunload` event listener
    setupBeforeUnloadListener = () =>
    {
        window.addEventListener('beforeunload', (e: BeforeUnloadEvent) =>
        {
            e.preventDefault();
            return this.doSomethingBeforeUnload();
        });
    };

    componentDidMount = (): void =>
    {
        // Activate the event listener
        this.setupBeforeUnloadListener();
    }

    render()
    {
        const { children = null } = this.props;
        return children === null || children === undefined ? Dialog() : children;
    }
}

export default Beforeunload;

Затем я завернул свое приложение: 

const container =
      <Beforeunload onBeforeunload={ () => 'Test'}>
        <AppContainer>
          <Router history={ history }>
            <IndexRoutes/>
          </Router>
        </AppContainer>
      </ Beforeunload>

const ROOT = document.getElementById('root');

ReactDOM.render(container, ROOT);

Страницы загружены, но когда я закрываю окно / вкладку, сообщений нет.Я попытался заменить Dialog () на строковое сообщение, но безуспешно.

Я попробовал форму идеи npm здесь, но безуспешно.

Кто-нибудь дозировал это раньше на некоторыхКстати, даже если кто-то преуспеет на странице и не сможет помочь?!

thnx

...