useFormStatusで、子のボタンから送信中かどうかを読む方法

import { useFormStatus } from 'react-dom';

type Props = {
  children: string;
  pendingText: string;
  name?: string;
  value?: string;
};

// どのフォームにも置ける送信ボタン。親の form の送信中は押せなくなる。
// name と value を渡したときは、押されたのが自分のときだけ pendingText を出す。
export function SubmitButton({ children, pendingText, name, value }: Props) {
  const { pending, data } = useFormStatus();
  const pressed = pending && (name === undefined || data.get(name) === value);
  return (
    <button type="submit" name={name} value={value} disabled={pending}>
      {pressed ? pendingText : children}
    </button>
  );
}

typecheck/DataWithoutPending.tsx(6,21): error TS18047: 'data' is possibly 'null'.

import type { ReactNode } from 'react';
import { send } from './server';
import { SubmitButton } from './SubmitButton';

// SubmitButton を、form から2段下のコンポーネントに置く
function Card({ children }: { children: ReactNode }) {
  return <section className="card">{children}</section>;
}
function Footer() {
  return (
    <div className="footer">
      <SubmitButton name="intent" value="draft" pendingText="下書きを保存中…">
        下書き保存
      </SubmitButton>
      <SubmitButton name="intent" value="publish" pendingText="公開中…">
        公開
      </SubmitButton>
    </div>
  );
}

export function Post() {
  async function save(formData: FormData) {
    await send(`${formData.get('intent')}:${formData.get('title')}`);
  }

  return (
    <form action={save}>
      <Card>
        <input name="title" />
        <Footer />
      </Card>
    </form>
  );
}

$ node run.mjs Post
  公開を押した直後: {title="猫の手" ボタン=["下書き保存"(押せない) "公開中…"(押せない)]} | サーバー=[受付:publish:猫の手]
  返事のあと: {title="" ボタン=["下書き保存" "公開"]} | サーバー=[受付:publish:猫の手 → 完了:publish:猫の手]
  下書き保存を押した直後: {title="肉球" ボタン=["下書きを保存中…"(押せない) "公開"(押せない)]} | サーバー=[受付:publish:猫の手 → 完了:publish:猫の手 → 受付:draft:肉球]
  返事のあと: {title="" ボタン=["下書き保存" "公開"]} | サーバー=[受付:publish:猫の手 → 完了:publish:猫の手 → 受付:draft:肉球 → 完了:draft:肉球]

import { useFormStatus } from 'react-dom';

// 送信中だけ、送っている内容を出す。
export function SendingNote({ field }: { field: string }) {
  const { pending, data } = useFormStatus();
  if (!pending) return null;
  return <p className="note">「{String(data.get(field))}」を送信中…</p>;
}

import { send } from './server';
import { SendingNote } from './SendingNote';
import { SubmitButton } from './SubmitButton';

export function TwoForms() {
  async function comment(formData: FormData) {
    await send(`コメント:${formData.get('body')}`);
  }
  async function subscribe(formData: FormData) {
    await send(`登録:${formData.get('email')}`);
  }

  return (
    <>
      <form action={comment}>
        <input name="body" />
        <SubmitButton pendingText="送信中…">コメントする</SubmitButton>
        <SendingNote field="body" />
      </form>
      <form action={subscribe}>
        <input name="email" />
        <SubmitButton pendingText="登録中…">登録する</SubmitButton>
        <SendingNote field="email" />
      </form>
    </>
  );
}

$ node run.mjs TwoForms
  送信前: {body="" ボタン=["コメントする"]} {email="" ボタン=["登録する"]} | サーバー=[]
  コメントするを押した直後: {body="にゃー" ボタン=["送信中…"(押せない)] 「にゃー」を送信中…} {email="" ボタン=["登録する"]} | サーバー=[受付:コメント:にゃー]
  返事のあと: {body="" ボタン=["コメントする"]} {email="" ボタン=["登録する"]} | サーバー=[受付:コメント:にゃー → 完了:コメント:にゃー]

import type { ReactNode } from 'react';
import { useFormStatus } from 'react-dom';

// 送信中は、中の入力欄をまとめて押せなくする。
export function PendingFieldset({ children }: { children: ReactNode }) {
  const { pending } = useFormStatus();
  return <fieldset disabled={pending}>{children}</fieldset>;
}

import { send } from './server';
import { PendingFieldset } from './PendingFieldset';
import { SubmitButton } from './SubmitButton';

export function Fieldset() {
  async function save(formData: FormData) {
    await send(`${formData.get('name')}/${formData.get('color')}`);
  }

  return (
    <form action={save}>
      <PendingFieldset>
        <input name="name" />
        <input name="color" />
        <SubmitButton pendingText="保存中…">保存</SubmitButton>
      </PendingFieldset>
    </form>
  );
}

$ node run.mjs Fieldset
  保存を押した直後: {name="たま"(押せない) color="三毛"(押せない) ボタン=["保存中…"(押せない)]} | サーバー=[受付:たま/三毛]
  返事のあと: {name="" color="" ボタン=["保存"]} | サーバー=[受付:たま/三毛 → 完了:たま/三毛]

import { useActionState } from 'react';
import { send } from './server';
import { SubmitButton } from './SubmitButton';

export function WithActionState() {
  const [count, formAction] = useActionState(async (prev: number, formData: FormData) => {
    await send(`${formData.get('title')}`);
    return prev + 1;
  }, 0);

  return (
    <form action={formAction}>
      <input name="title" />
      <SubmitButton pendingText="保存中…">保存</SubmitButton>
      <p className="count">保存した回数: {count}</p>
    </form>
  );
}

$ node run.mjs WithActionState
  保存を押した直後: {title="猫の手" ボタン=["保存中…"(押せない)] 保存した回数: 0} | サーバー=[受付:猫の手]
  返事のあと: {title="" ボタン=["保存"] 保存した回数: 1} | サーバー=[受付:猫の手 → 完了:猫の手]

import type { FormEvent } from 'react';
import { send } from './server';
import { SubmitButton } from './SubmitButton';

// action ではなく onSubmit で送信を扱う
export function OnSubmit() {
  async function handleSubmit(e: FormEvent<HTMLFormElement>) {
    e.preventDefault();
    const formData = new FormData(e.currentTarget);
    await send(String(formData.get('title')));
  }

  return (
    <form onSubmit={handleSubmit}>
      <input name="title" />
      <SubmitButton pendingText="保存中…">保存</SubmitButton>
    </form>
  );
}

$ node run.mjs OnSubmit
  保存を押した直後: {title="猫の手" ボタン=["保存"]} | サーバー=[受付:猫の手]
  返事のあと: {title="猫の手" ボタン=["保存"]} | サーバー=[受付:猫の手 → 完了:猫の手]

import { useFormStatus } from 'react-dom';
import { send } from './server';

function OutsideSaveButton() {
  const { pending } = useFormStatus();
  return (
    <button type="submit" form="edit-form" disabled={pending}>
      {pending ? '保存中…' : '保存'}
    </button>
  );
}

// ボタンを form の外に置き、HTML の form 属性でフォームとつなぐ
export function OutsideButton() {
  async function save(formData: FormData) {
    await send(String(formData.get('title')));
  }

  return (
    <div className="dialog">
      <form id="edit-form" action={save}>
        <input name="title" />
      </form>
      <div className="dialog-footer">
        <OutsideSaveButton />
      </div>
    </div>
  );
}

$ node run.mjs OutsideButton
  保存を押した直後: {title="猫の手" ボタン=[]} {ボタン=["保存"]} | サーバー=[受付:猫の手]
  返事のあと: {title="" ボタン=[]} {ボタン=["保存"]} | サーバー=[受付:猫の手 → 完了:猫の手]