Блог

Я реализую диалоговое окно с предупреждением, когда пользователь пытается перейти от формы после ввода информации. При переходе на страницу, использующую react-router, у меня появляется диалоговое окно с пользовательским предупреждением. При переходе на страницы, не связанные с react-router, или с помощью кнопок возврата / перезагрузки браузера у меня установлено отображение стандартного диалогового окна предупреждения браузера.

Все работает как ожидалось, ЗА исключением того, что вы нажимаете кнопку отправки в форме. Поскольку диалоговое окно генерируется, когда форма загрязнена, оно все еще отображается при отправке. Я ищу способ указать, что при отправке пользователем приглашение не активируется.

Я пытался использовать некоторые другие условные обозначения, которые запускают диалоговое окно (или нет), например, formIsDirty amp;amp; formIsSubmitting , но это заставляет диалоговое окно появляться всякий раз, когда форма не отправляется.

Я использую: react 16.13.1 и react-router-dom 5.2.0

Это целый компонент. Когда я использую его в форме, я использую !isPristine from redux-form в качестве условия для when реквизита <Prompt>

 import React, { useEffect, useState, useRef } from 'react';
import { useHistory, Prompt } from 'react-router-dom';
import PropTypes from 'prop-types';
import { FormattedMessage } from 'react-intl';
import WarningDialog from 'src/components/WarningDialog';

export default function ExitDialog({ isDirty }) {
  const history = useHistory();
  const nextLocation = useRef();
  const [showExitDialog, setShowExitDialog] = useState(false);

  const cancelNavigation = () => { setShowExitDialog(false); };

  const handleBlockedNavigation = (location) => {
    setShowExitDialog(true);
    nextLocation.current = location;
    return false;
  };

  const confirmNavigation = () => {
    setShowExitDialog(false);
    if (nextLocation.current) { // Navigate to the previous blocked location
      history.push(nextLocation.current);
    }
  };

  useEffect(() => {
    // to handle navigation to Plan10 pages, using the back/forward or refresh in the browser
    function navHandler(e) {
      // Cancel the event
      e.preventDefault();
      // Chrome requires returnValue to be set
      e.returnValue = '';
    }
    if (isDirty) {
      window.addEventListener('beforeunload', navHandler);
    }
    return () => {
      window.removeEventListener('beforeunload', navHandler);
    };
  }, [isDirty]);

  return (
    <>
      <Prompt when={isDirty amp;amp; !showExitDialog} message={handleBlockedNavigation} />
      <WarningDialog
        alertMessage={<FormattedMessage id="admin_home.smartReports.exit_without_saving_title" />}
        applyLabel={<FormattedMessage id="buttons.exit" />}
        cancelLabel={<FormattedMessage id="buttons.continue_editing" />}
        open={showExitDialog}
        data-test-id="exitDialog"
        handleClose={cancelNavigation}
        handleApply={confirmNavigation}
        disableBackdropClick
      >
        <FormattedMessage id="admin_home.smartReports.exit_without_saving_contents" />
      </WarningDialog>
    </>
  );
}

ExitDialog.propTypes = {
  isDirty: PropTypes.bool.isRequired,
};