ReactJS - useFormStatus() 鉤子

---

---

React 中的 useFormStatus 鉤子是一個很有用的工具，用於檢查我們 Web 應用中最近一次表單提交的狀態。此鉤子使我們能夠輕鬆地瞭解表單何時正在提交資料。在本教程中，我們將把 useFormStatus 鉤子分解成簡單的術語，以幫助讀者理解併成功使用它。

語法

const { pending, data, method, action } = useFormStatus();

引數

useFormStatus 鉤子不接受任何引數。

返回值

當我們使用 useFormStatus 時，我們會得到一個包含以下屬性的狀態物件：

• pending - 它是一個簡單的真或假值，指示父 <form> 是否當前正在提交。如果為真，則表單正在提交；否則，則未提交。

• data - 它是一個物件，包含父 <form> 在提交期間傳送的資料。如果沒有提交或沒有父表單，它將為 null。

• method - 它是一個字串，可以是“get”或“post”，以顯示父 <form> 是否使用 GET 或 POST HTTP 方法。<form> 預設使用 GET，但我們可以使用 method 屬性覆蓋它。

• action - 它對提供給父 <form> 的 action 屬性的函式的引用。如果沒有父表單，此屬性為 null。如果 action 屬性指定 URI 值，或者沒有給出 action 屬性，則 status.action 將為 null。

如何使用它？

• 匯入“react-dom” useFormStatus 鉤子。

• 在 <form> 內部渲染的元件中使用它。

• 要查看錶單是否當前正在提交，請在狀態物件上使用諸如 status.pending 之類的屬性。

示例

示例 1

讓我們討論一個如何使用 useFormStatus 鉤子建立 React 應用的簡單示例。在這個示例中，我們將建立一個簡單的表單，其中包含一個提交按鈕，該按鈕在表單提交後變為停用狀態。

import React from "react";
import { useFormStatus } from "react-dom";

function App() {
   const status = useFormStatus();   
   const handleSubmit = (e) => {
      e.preventDefault();
      // form submission
      status.pending = true;
      setTimeout(() => {
         status.pending = false;
         alert("Form submitted!");
      }, 2000); // 2-second for form submission
   };
   
   return (
      <div className="App">
         <h1>Form Submission Example</h1>
         <form onSubmit={handleSubmit}>
            <div>
               <label htmlFor="name">User Name:</label>
               <input type="text" id="name" name="name" required />
            </div>
            <div>
               <label htmlFor="email">User Email:</label>
               <input type="email" id="email" name="email" required />
            </div>
            <button type="submit" disabled={status.pending}>
               {status.pending ? "Submitting..." : "Submit"}
            </button>
         </form>
      </div>
   );
}

export default App;

輸出

執行應用後，我們將能夠看到一個帶有姓名和電子郵件框以及提交按鈕的基本表單。當我們填寫表單並單擊提交按鈕時，它將在模擬表單提交期間停用 2 秒。之後，我們將看到一個警報，驗證表單提交。

示例 2

讓我們看看在不同上下文中使用 useFormStatus 函式的另一個示例。假設我們要建立一個簡單的登錄檔單，其中包含使用者名稱、密碼和確認密碼欄位。表單將在提交時顯示載入狀態。

import React from "react";
import { useFormStatus } from "react-dom";

function RegistrationForm() {
   // Use useFormStatus to track form submission status
   const status = useFormStatus();
   
   const handleSubmit = (e) => {
      e.preventDefault();
      
      // form submission
      status.pending = true;
      setTimeout(() => {
         status.pending = false;
         alert("Registration successful!");
      }, 2000); // 2 seconds for form submission
   };
   
   return (
      <div>
         <h1>Registration Form</h1>
         <form onSubmit={handleSubmit}>
            <div>
               <label htmlFor="username">Username:</label>
               <input type="text" id="username" name="username" required />
            </div>
            <div>
               <label htmlFor="password">Password:</label>
               <input type="password" id="password" name="password" required />
            </div>
            <div>
               <label htmlFor="confirmPassword">Confirm Password:</label>
               <input
                  type="password"
                  id="confirmPassword"
                  name="confirmPassword"
                  required
               />
            </div>
            <button type="submit" disabled={status.pending}>
            {status.pending ? "Registering..." : "Register"}
            </button>
         </form>
      </div>
   );
}

export default RegistrationForm;

輸出

此應用中使用 useFormStatus 鉤子來控制表單提交狀態。當提交正在進行時，表單將顯示“正在註冊...”並在 2 秒延遲後顯示一個警報。

示例 3

讓我們再建立一個使用 useFormStatus 函式的示例。這次，我們將建立一個簡單的反饋表單，其中包含一個文字欄位，使用者可以在其中提交輸入。提交時，表單將顯示載入狀態。

import React from "react";
import { useFormStatus } from "react-dom";

function FeedbackForm() {
   // Use useFormStatus to track form submission status
   const status = useFormStatus();
   
   const handleSubmit = (e) => {
      e.preventDefault();
      
      // Simulating form submission
      status.pending = true;
      setTimeout(() => {
         status.pending = false;
         alert("Feedback submitted!");
      }, 2000); // 2 seconds for form submission
   };
   
   return (
      <div>
         <h1>Feedback Form</h1>
         <form onSubmit={handleSubmit}>
            <div>
               <label htmlFor="feedback">Your Feedback:</label>
               <textarea
                  id="feedback"
                  name="feedback"
                  rows="4"
                  cols="50"
                  required
               ></textarea>
            </div>
            <button type="submit" disabled={status.pending}>
               {status.pending ? "Submitting..." : "Submit Feedback"}
            </button>
         </form>
      </div>
   );
}

export default FeedbackForm;

輸出

在此示例中，FeedbackForm 元件使用 useFormStatus 鉤子來控制表單提交狀態。當提交正在進行時，表單將顯示“正在提交...”並在 2 秒延遲後顯示一個警報。使用者可以在文字框中留下反饋。

限制

• useFormStatus 鉤子需要在 <form> 內渲染的元件中使用。

• 它僅提供父 <form> 的狀態資訊；它不提供同一組件或子元件中任何其他表單的狀態資訊。

總結

React 中的 useFormStatus 鉤子是用於檢查我們 Web 應用中表單提交進度的一個有用工具。我們可以透過呼叫此鉤子輕鬆地驗證表單是否當前正在提交、獲取提交的資料等等。請記住，它應該在 <form> 內渲染的元件中使用。