useFormStatus

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

• Справочник
  • useFormStatus()
• Использование
  • Отображение состояния ожидания во время отправки формы
  • Чтение данных формы, которые отправляются
• Отладка
  • status.pending никогда не true

Справочник

useFormStatus()

Хук 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>. Хук возвращает информацию, например, свойство pending, которое показывает, активно ли отправляется форма.

В примере выше Submit использует эту информацию для отключения <button> нажатий во время отправки формы.

См. дополнительные примеры ниже.

Параметры

useFormStatus не принимает никаких параметров.

Возвращаемое значение

Объект status со следующими свойствами:

• pending: Логическое значение. Если true, это означает, что родительская <form> ожидает отправки. В противном случае, false.

• data: Объект, реализующий FormData interface, содержащий данные, которые отправляет родительская <form>. Если нет активной отправки или нет родительской <form>, будет null.

• method: Строковое значение, равное либо 'get', либо 'post'. Это указывает, отправляет ли родительская <form> данные с GET или POST методом HTTP. По умолчанию <form> использует метод GET и может быть задан свойством method.

• action: Ссылка на функцию, переданную в свойство action родительской <form>. Если родительской <form> нет, свойство равно null. Если предоставлено значение URI в свойстве action или не задано свойство action, status.action будет null.

Ограничения

• Хук useFormStatus должен вызываться из компонента, отображаемого внутри <form>.
• useFormStatus вернёт информацию о статусе только для родительской <form>. Он не вернёт информацию о статусе <form> , отображённых в том же компоненте или дочерних компонентах.

Использование

Отображение состояния ожидания во время отправки формы

Чтобы отобразить состояние ожидания во время отправки формы, вы можете вызвать хук useFormStatus в компоненте, отображённом в <form>, и прочитать свойство pending.

Здесь мы используем свойство pending для обозначения отправки формы.

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} />;
}

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>;
}

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 для отображения временного сообщения состояния, подтверждающего запрашиваемое имя пользователя.

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 вызывается в компоненте, который является потомком элемента <form>.

useFormStatus не отслеживает состояние <form> , отображаемого в том же компоненте. См. Раздел «Опасность» для получения дополнительной информации.