離開頁面前，如何防止表單數(shù)據(jù)丟失？

作者：前端小智 2023-04-26 08:18:48

本文將演示如何實(shí)現(xiàn)一個(gè) FormPrompt 組件，當(dāng)用戶嘗試離開具有未保存更改的頁面時(shí)，會(huì)發(fā)出警報(bào)，從而有效地提高整體用戶體驗(yàn)。

本文介紹了如何實(shí)現(xiàn)一個(gè)FormPrompt組件，在用戶嘗試離開具有未保存更改的頁面時(shí)發(fā)出警告。文章討論了如何使用純JavaScript和beforeunload事件處理這類情況，以及使用React Router v5中的Prompt組件和useBeforeUnload以及unstable等React特定解決方案。向用戶添加一個(gè)確認(rèn)對(duì)話框，詢問他們?cè)诰哂形幢４姹韱胃牡那闆r下是否確認(rèn)重定向是一種良好的用戶體驗(yàn)實(shí)踐。通過顯示此提示，用戶將意識(shí)到他們有未保存的更改，并允許在繼續(xù)重定向之前保存或丟棄它們的工作。

下面是正文：

在今天的數(shù)字化環(huán)境中，為涉及表單提交的 Web 應(yīng)用程序提供最佳用戶體驗(yàn)非常重要。用戶常見的一個(gè)煩惱來源是由于意外離開頁面而丟失未保存的更改。

本文將演示如何實(shí)現(xiàn)一個(gè) FormPrompt 組件，當(dāng)用戶嘗試離開具有未保存更改的頁面時(shí)，會(huì)發(fā)出警報(bào)，從而有效地提高整體用戶體驗(yàn)。我們將討論如何使用純 JavaScript 處理此類情況，使用 React Router v5 中的 Prompt 組件以及在 React Router v6 中使用 useBeforeUnload 和 unstable_useBlocker 鉤子的特定解決方案。

應(yīng)用程序的最終版本可以在 CodeSandbox 上進(jìn)行測(cè)試，代碼可在 GitHub 上獲得。

使用 beforeunload 事件檢測(cè)頁面離開

我們創(chuàng)建 FormPrompt 組件，在其中添加 beforeunload 事件的監(jiān)聽器。此事件將在用戶離開頁面之前觸發(fā)。通過在事件上調(diào)用 preventDefault 方法，我們可以觸發(fā)瀏覽器的確認(rèn)對(duì)話框。僅當(dāng)表單具有未保存的更改（由 hasUnsavedChanges 屬性指示）時(shí)，才會(huì)激活此對(duì)話框。

// FormPrompt.js

import { useEffect } from "react";

export const FormPrompt = ({ hasUnsavedChanges }) => {
  useEffect(() => {
    const onBeforeUnload = (e) => {
      if (hasUnsavedChanges) {
        e.preventDefault();
        e.returnValue = "";
      }
    };
    window.addEventListener("beforeunload", onBeforeUnload);
    return () => {
      window.removeEventListener("beforeunload", onBeforeUnload);
    };
  }, [hasUnsavedChanges]);
};

作為示例，我們將在表單的 Contact 步驟中使用此組件：

// Steps/Contact.js

import { forwardRef } from "react";
import { useForm } from "react-hook-form";
import { useAppState } from "../state";
import { Button, Field, Form, Input } from "../Forms";
import { FormPrompt } from "../FormPrompt";

export const Contact = forwardRef((props, ref) => {
  const [state, setState] = useAppState();
  const {
    handleSubmit,
    register,
    formState: { isDirty },
  } = useForm({
    defaultValues: state,
    mode: "onSubmit",
  });

  const saveData = (data) => {
    setState({ ...state, ...data });
  };

  return (
    <Form onSubmit={handleSubmit(saveData)} nextStep={"/education"}>
      <FormPrompt hasUnsavedChanges={isDirty} />
      <fieldset>
        <legend>Contact</legend>
        <Field label="First name">
          <Input {...register("firstName")} id="first-name" />
        </Field>
        <Field label="Last name">
          <Input {...register("lastName")} id="last-name" />
        </Field>
        <Field label="Email">
          <Input {...register("email")} type="email" id="email" />
        </Field>
        <Field label="Password">
          <Input {...register("password")} type="password" id="password" />
        </Field>
        <Button ref={ref}>Next {">"}</Button>
      </fieldset>
    </Form>
  );
});

當(dāng)在表單字段中輸入數(shù)據(jù)并在保存更改之前嘗試重新加載頁面或?qū)Ш降酵獠縐RL時(shí)，瀏覽器將顯示確認(rèn)對(duì)話框。

使用React Router 5防止頁面導(dǎo)航

這個(gè)組件已經(jīng)足夠好用于我們的應(yīng)用程序，因?yàn)樗乃许撁娑际潜韱蔚囊徊糠帧Ｈ欢趯?shí)際情況下，這并不總是如此。為了使我們的示例更具代表性，我們添加一個(gè)名為 Home 的新路由，它將重定向到表單之外。 Home 組件很簡單，只顯示一個(gè)主頁問候語。

// Home.js

export const Home = () => {
  return <div>Welcome to the home page!</div>;
};

我們還需要對(duì) App 組件進(jìn)行一些調(diào)整，以適應(yīng)這條新路由。

// App.js

import { useRef } from "react";
import {
  BrowserRouter as Router,
  Routes,
  Route,
  NavLink,
} from "react-router-dom";
import { AppProvider } from "./state";
import { Contact } from "./Steps/Contact";
import { Education } from "./Steps/Education";
import { About } from "./Steps/About";
import { Confirm } from "./Steps/Confirm";
import { Stepper } from "./Steps/Stepper";
import { Home } from "./Home";

export const App = () => {
  const buttonRef = useRef();

  const onStepChange = () => {
    buttonRef.current?.click();
  };

  return (
    <div className="App">
      <AppProvider>
        <Router>
          <div className="nav-wrapper">
            <NavLink to={"/"}>Home</NavLink>
            <Stepper onStepChange={onStepChange} />
          </div>
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/contact" element={<Contact ref={buttonRef} />} />
            <Route path="/education" element={<Education ref={buttonRef} />} />
            <Route path="/about" element={<About ref={buttonRef} />} />
            <Route path="/confirm" element={<Confirm />} />
          </Routes>
        </Router>
      </AppProvider>
    </div>
  );
};

我們可以看到當(dāng)我們?cè)诒砀裰休斎胄畔⒉?dǎo)航到主頁時(shí)，輸入的數(shù)據(jù)不會(huì)被保存，也不會(huì)出現(xiàn)任何確認(rèn)對(duì)話框。這是因?yàn)閷?dǎo)航由React Router處理，不會(huì)觸發(fā) beforeunload 事件，使瀏覽器API在這種情況下無效。幸運(yùn)的是，React Router v5提供了 Prompt 組件，以在離開未保存更改的頁面之前警告用戶。該組件接受兩個(gè)props： when 和 message 。 when 屬性是一個(gè)布爾值，用于確定是否應(yīng)該顯示提示，而 message 屬性表示向用戶顯示的文本。

使用 Prompt 時(shí)，導(dǎo)航到主頁路由時(shí)行為正確，但是當(dāng)用戶輸入表單數(shù)據(jù)并進(jìn)入下一步時(shí)，確認(rèn)對(duì)話框也會(huì)出現(xiàn)。這是不希望的，因?yàn)槲覀冊(cè)趯?dǎo)航到下一步時(shí)保存表單數(shù)據(jù)。

為了解決這個(gè)問題，我們需要驗(yàn)證下一個(gè) URL 是否是表單步驟之一，然后再檢查未保存的更改。可以使用 message 屬性來實(shí)現(xiàn)這一點(diǎn)，它也可以是一個(gè)函數(shù)。該函數(shù)的第一個(gè)參數(shù)是下一個(gè)位置。如果函數(shù)返回 true ，則允許轉(zhuǎn)換到下一個(gè) URL；否則，它可以返回一個(gè)字符串來顯示提示。

// FormPrompt.js

import { useEffect } from "react";
import { Prompt } from "react-router-dom";

const stepLinks = ["/contact", "/education", "/about", "/confirm"];

export const FormPrompt = ({ hasUnsavedChanges }) => {
  useEffect(() => {
    const onBeforeUnload = (e) => {
      if (hasUnsavedChanges) {
        e.preventDefault();
        e.returnValue = "";
      }
    };
    window.addEventListener("beforeunload", onBeforeUnload);

    return () => {
      window.removeEventListener("beforeunload", onBeforeUnload);
    };
  }, [hasUnsavedChanges]);

  const onLocationChange = (location) => {
    if (stepLinks.includes(location.pathname)) {
      return true;
    }
    return "You have unsaved changes, are you sure you want to leave?";
  };

  return <Prompt when={hasUnsavedChanges} message={onLocationChange} />;
};

通過這些更改，我們可以安全地在表單步驟之間導(dǎo)航，并在嘗試離開未保存更改的表單時(shí)收到警告。

使用 React Router 6 防止頁面導(dǎo)航

件已被移除，而 unstable_usePrompt 鉤子在 6.7.0 版本中被添加。正如其名稱所示，該鉤子的實(shí)現(xiàn)可能會(huì)發(fā)生變化，尚未記錄文檔。但是，它應(yīng)該適用于我們的使用情況。

我們可以使用這個(gè)鉤子來復(fù)制版本5中 Prompt 組件的行為，但首先，我們需要調(diào)整我們的 App 組件以使用新的數(shù)據(jù)路由器，因?yàn)樗鼈兪?nbsp;unstable_usePrompt 鉤子工作所必需的。

// App.js

import { useRef } from "react";
import { createBrowserRouter, RouterProvider, Outlet } from "react-router-dom";
import { AppProvider } from "./state";
import { Contact } from "./Steps/Contact";
import { Education } from "./Steps/Education";
import { About } from "./Steps/About";
import { Confirm } from "./Steps/Confirm";
import { Stepper } from "./Steps/Stepper";
import { Home } from "./Home";

export const App = () => {
  const buttonRef = useRef();

  const onStepChange = () => {
    buttonRef.current?.click();
  };

  const router = createBrowserRouter([
    {
      element: (
        <>
          <Stepper onStepChange={onStepChange} />
          <Outlet />
        </>
      ),
      children: [
        {
          path: "/",
          element: <Home />,
        },
        {
          path: "/contact",
          element: <Contact ref={buttonRef} />,
        },
        { path: "/education", element: <Education ref={buttonRef} /> },
        { path: "/about", element: <About ref={buttonRef} /> },
        { path: "/confirm", element: <Confirm /> },
      ],
    },
  ]);

  return (
    <div className="App">
      <AppProvider>
        <RouterProvider router={router} />
      </AppProvider>
    </div>
  );
};

我們使用 createBrowserRouter 函數(shù)來創(chuàng)建路由器。請(qǐng)注意， Stepper 沒有單獨(dú)的路徑，所有其他路由都是它的子路由。它作為布局組件，在每個(gè)頁面上呈現(xiàn)。每個(gè)頁面的內(nèi)容顯示在特殊的 Outlet 組件的位置。為了簡化 App 邏輯，我們還將主頁導(dǎo)航鏈接移動(dòng)到 Stepper 中。

設(shè)置完成后，我們現(xiàn)在可以實(shí)現(xiàn)重定向阻止功能。我們首先通過在 FormPrompt 中使用在6.6版本中引入的 useBeforeUnload 鉤子來替換 onbeforeunload 邏輯。

// FormPrompt.js

import { useEffect, useCallback, useRef } from "react";
import { useBeforeUnload } from "react-router-dom";

const stepLinks = ["/contact", "/education", "/about", "/confirm"];

export const FormPrompt = ({ hasUnsavedChanges }) => {
  useBeforeUnload(
    useCallback(
      (event) => {
        if (hasUnsavedChanges) {
          event.preventDefault();
          event.returnValue = "";
        }
      },
      [hasUnsavedChanges]
    ),
    { capture: true }
  );

  return null;
};

這個(gè)改變簡化了我們組件的邏輯。現(xiàn)在，我們可以添加一個(gè)自定義的 usePrompt 鉤子，并像版本5中的 Prompt 組件一樣使用它。

// FormPrompt.js

import { useEffect, useCallback, useRef } from "react";
import {
  useBeforeUnload,
  unstable_useBlocker as useBlocker,
} from "react-router-dom";

const stepLinks = ["/contact", "/education", "/about", "/confirm"];

export const FormPrompt = ({ hasUnsavedChanges }) => {
  const onLocationChange = useCallback(
    ({ nextLocation }) => {
      if (!stepLinks.includes(nextLocation.pathname) && hasUnsavedChanges) {
        return !window.confirm(
          "You have unsaved changes, are you sure you want to leave?"
        );
      }
      return false;
    },
    [hasUnsavedChanges]
  );

  usePrompt(onLocationChange, hasUnsavedChanges);
  useBeforeUnload(
    useCallback(
      (event) => {
        if (hasUnsavedChanges) {
          event.preventDefault();
          event.returnValue = "";
        }
      },
      [hasUnsavedChanges]
    ),
    { capture: true }
  );

  return null;
};

function usePrompt(onLocationChange, hasUnsavedChanges) {
  const blocker = useBlocker(hasUnsavedChanges ? onLocationChange : false);
  const prevState = useRef(blocker.state);

  useEffect(() => {
    if (blocker.state === "blocked") {
      blocker.reset();
    }
    prevState.current = blocker.state;
  }, [blocker]);
}

useBlocker 鉤子接受布爾值或阻止函數(shù)作為其參數(shù)，類似于 Prompt 組件中的 message 屬性。該函數(shù)的一個(gè)參數(shù)是下一個(gè)位置，我們使用它來確定用戶是否正在離開我們的表單。如果是這種情況，我們利用瀏覽器的 window.confirm 方法顯示一個(gè)對(duì)話框，詢問用戶確認(rèn)重定向或取消它。最后，我們?cè)?nbsp;usePrompt 鉤子中抽象出阻止邏輯并管理阻止器的狀態(tài)。

我們可以通過導(dǎo)航到聯(lián)系步驟，填寫一些字段并單擊主頁導(dǎo)航項(xiàng)來測(cè)試 FormPrompt 是否按預(yù)期工作。我們會(huì)看到一個(gè)確認(rèn)對(duì)話框，詢問我們是否要離開該頁面。

總結(jié)

總之，為未保存的表單更改實(shí)現(xiàn)確認(rèn)對(duì)話框是增強(qiáng)用戶體驗(yàn)的重要實(shí)踐。本文演示了如何創(chuàng)建一個(gè) FormPrompt 組件，當(dāng)用戶嘗試離開具有未保存更改的頁面時(shí)，該組件會(huì)向用戶發(fā)出警告。我們探討了如何使用純JavaScript處理這種情況，使用 beforeunload 事件以及在React中使用React Router v5中的 Prompt 組件和React Router v6中的 useBeforeUnload 和 unstable_useBlocker 鉤子。通過將此功能合并到您的表單中，你可以幫助用戶避免失去未保存的工作而感到沮喪。

本文轉(zhuǎn)載自微信公眾號(hào)「大遷世界」，可以通過以下二維碼關(guān)注。轉(zhuǎn)載本文請(qǐng)聯(lián)系大遷世界公眾號(hào)。