useFormStatus

Canary

ה-Hook useFormStatus זמין כרגע רק בערוצי Canary ו-experimental של React. מידע נוסף ב-ערוצי השחרור של React.

useFormStatus הוא Hook שמספק מידע סטטוס על שליחת הטופס האחרונה.

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

Reference
- useFormStatus()
שימוש
- הצגת מצב pending בזמן שליחת טופס
- קריאת נתוני הטופס שנשלחים
פתרון תקלות
- status.pending אף פעם לא true

Reference

`useFormStatus()`

ה-Hook useFormStatus מספק מידע סטטוס על שליחת הטופס האחרונה.

import { useFormStatus } from "react-dom";
import action from './actions';

function Submit() {
  const status = useFormStatus();
  return <button disabled={status.pending}>Submit</button>
}

export default function App() {
  return (
    <form action={action}>
      <Submit />
    </form>
  );
}

כדי לקבל מידע סטטוס, רכיב Submit חייב להיות מרונדר בתוך <form>. ה-Hook מחזיר מידע כמו המאפיין pending שמציין האם הטופס כרגע בשליחה.

בדוגמה למעלה, Submit משתמש במידע הזה כדי להשבית לחיצות על <button> בזמן שהטופס נשלח.

ראו דוגמאות נוספות בהמשך.

Parameters

useFormStatus לא מקבל פרמטרים.

Returns

אובייקט status עם המאפיינים הבאים:

pending: ערך בוליאני. אם true, המשמעות היא של-<form> ההורה יש שליחה ממתינה. אחרת false.
data: אובייקט שמממש את FormData interface ומכיל את הנתונים ש-<form> ההורה שולח. אם אין שליחה פעילה או שאין <form> הורה, הערך יהיה null.
method: מחרוזת בערך 'get' או 'post'. מייצגת האם ה-<form> ההורה שולחת באמצעות GET או POST HTTP method. כברירת מחדל, <form> תשתמש ב-GET, ואפשר להגדיר זאת דרך המאפיין method.

action: הפניה לפונקציה שהועברה ל-prop בשם action של form ההורה. אם אין <form> הורה, המאפיין הוא null. אם סופק ערך URI ל-prop action, או שלא צוין action, הערך של status.action יהיה null.

Caveats

ה-Hook useFormStatus חייב להיקרא מתוך קומפוננטה שמרונדרת בתוך <form>.
useFormStatus תחזיר מידע סטטוס רק עבור <form> הורה. היא לא תחזיר מידע סטטוס עבור <form> שמרונדרת באותה קומפוננטה עצמה או בקומפוננטות ילדים.

שימוש

הצגת מצב pending בזמן שליחת טופס

כדי להציג מצב pending בזמן שטופס נשלח, אפשר לקרוא ל-Hook useFormStatus בקומפוננטה שמרונדרת בתוך <form> ולקרוא את מאפיין pending שמוחזר.

כאן אנחנו משתמשים ב-pending כדי לציין שהטופס נשלח.

Fork

import { useFormStatus } from "react-dom";
import { submitForm } from "./actions.js";

function Submit() {
  const { pending } = useFormStatus();
  return (
    <button type="submit" disabled={pending}>
      {pending ? "Submitting..." : "Submit"}
    </button>
  );
}

function Form({ action }) {
  return (
    <form action={action}>
      <Submit />
    </form>
  );
}

export default function App() {
  return <Form action={submitForm} />;
}

Pitfall

`useFormStatus` לא תחזיר מידע סטטוס עבור `<form>` שמרונדרת באותה קומפוננטה.

ה-Hook useFormStatus מחזיר מידע סטטוס רק עבור <form> הורה ולא עבור <form> שמרונדרת באותה קומפוננטה שקוראת ל-Hook, או בקומפוננטות ילדים.

function Form() {
  // 🚩 `pending` will never be true
  // useFormStatus does not track the form rendered in this component
  const { pending } = useFormStatus();
  return <form action={submit}></form>;
}

במקום זאת, קראו ל-useFormStatus מתוך קומפוננטה שנמצאת בתוך <form>.

function Submit() {
  // ✅ `pending` will be derived from the form that wraps the Submit component
  const { pending } = useFormStatus();
  return <button disabled={pending}>...</button>;
}

function Form() {
  // This is the <form> `useFormStatus` tracks
  return (
    <form action={submit}>
      <Submit />
    </form>
  );
}

קריאת נתוני הטופס שנשלחים

אפשר להשתמש במאפיין data מתוך מידע הסטטוס שמוחזר מ-useFormStatus כדי להציג אילו נתונים המשתמש שולח.

כאן יש לנו טופס שבו משתמשים יכולים לבקש שם משתמש. אפשר להשתמש ב-useFormStatus כדי להציג הודעת סטטוס זמנית שמאשרת איזה שם משתמש הם ביקשו.

Fork

import {useState, useMemo, useRef} from 'react';
import {useFormStatus} from 'react-dom';

export default function UsernameForm() {
  const {pending, data} = useFormStatus();

  return (
    <div>
      <h3>Request a Username: </h3>
      <input type="text" name="username" disabled={pending}/>
      <button type="submit" disabled={pending}>
        Submit
      </button>
      <br />
      <p>{data ? `Requesting ${data?.get("username")}...`: ''}</p>
    </div>
  );
}

פתרון תקלות

`status.pending` אף פעם לא `true`

useFormStatus תחזיר מידע סטטוס רק עבור <form> הורה.

אם הקומפוננטה שקוראת ל-useFormStatus אינה מקוננת בתוך <form>, הערך status.pending תמיד יהיה false. ודאו ש-useFormStatus נקראת בתוך קומפוננטה שהיא child של אלמנט <form>.

useFormStatus לא תעקוב אחרי הסטטוס של <form> שמרונדרת באותה קומפוננטה. ראו Pitfall לפרטים נוספים.

PrevioususeFormState

Nextקומפוננטות

useFormStatus - This feature is available in the latest Canary