javascript - React-router-dom 中的自定义提示组件。防止页面重新加载

Question

我正在使用react-router-dom中的提示来创建自定义组件，以防止用户从弹出表单中离开。

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

有人知道这种情况的解决方法吗？

Answer 1

您可以捕获窗口事件“beforeUnload”来本地执行此操作，如下所示

因此在 componentDidMount 中添加此事件监听器，例如

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

然后在 componentWillUnmount 中，您可以删除此事件监听器，因为当用户转到其他页面(例如

)时，您不想将其留在那里

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

然后 pageRefreshFunction 应该有你的弹出窗口触发器

但是根据下面的资源，不再允许自定义弹出窗口，您只能使用 native 浏览器特定的弹出窗口

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