React 19で、formのactionに関数を渡して送信する方法

import { useState } from 'react';

export function SyncAction() {
  const [controlled, setControlled] = useState('');
  const [last, setLast] = useState('（まだ）');

  function search(formData: FormData) {
    setLast(`${formData.get('q')} / ${formData.get('tag')}`);
  }

  return (
    <form action={search}>
      <input name="q" />
      <input name="tag" value={controlled} onChange={(e) => setControlled(e.target.value)} />
      <button type="submit">検索</button>
      <p id="last">{last}</p>
    </form>
  );
}

$ node run.mjs SyncAction
  送信前: q="react" tag="form" ボタン=["検索"] | 受け取った値=（まだ） | サーバー=[]
  検索を押したあと: q="" tag="form" ボタン=["検索"] | 受け取った値=react / form | サーバー=[]
  submit イベント: defaultPrevented=true URL=about:blank

import { useFormStatus } from 'react-dom';

export function SubmitButton({ label = '保存' }: { label?: string }) {
  const { pending, data, method, action } = useFormStatus();
  return (
    <>
      <button type="submit" disabled={pending}>
        {pending ? '保存中…' : label}
      </button>
      <span className="status">
        pending={String(pending)} data={data ? `"${data.get('title')}"` : 'null'} method={String(method)} action=
        {typeof action === 'function' ? action.name : String(action)}
      </span>
    </>
  );
}

import { saveTitle } from './server';
import { SubmitButton } from './SubmitButton';

export function Basic() {
  async function save(formData: FormData) {
    const title = String(formData.get('title') ?? '');
    await saveTitle(title);
  }

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

$ node run.mjs Basic
  送信前: title="" ボタン=["保存"] | pending=false data=null method=null action=null | サーバー=[]
  保存を押した直後: title="猫の手" ボタン=["保存中…"(押せない)] | pending=true data="猫の手" method=get action=save | サーバー=[受付:猫の手]
  返事のあと: title="" ボタン=["保存"] | pending=false data=null method=null action=null | サーバー=[受付:猫の手 → 保存:猫の手]

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

export function SameComponent() {
  // form と同じコンポーネントで useFormStatus を呼ぶ
  const { pending } = useFormStatus();

  async function save(formData: FormData) {
    await saveTitle(String(formData.get('title') ?? ''));
  }

  return (
    <form action={save}>
      <input name="title" />
      <button type="submit" disabled={pending}>
        {pending ? '保存中…' : '保存'}
      </button>
    </form>
  );
}

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

import { saveTitle } from './server';
import { SubmitButton } from './SubmitButton';

export function TwoButtons() {
  async function save(formData: FormData) {
    await saveTitle(String(formData.get('title') ?? ''));
  }
  async function saveDraft(formData: FormData) {
    await saveTitle(`下書き:${formData.get('title')}`);
  }

  return (
    <form action={save}>
      <input name="title" />
      <SubmitButton />
      <button type="submit" formAction={saveDraft}>下書き保存</button>
    </form>
  );
}

$ node run.mjs TwoButtons
  下書き保存を押した直後: title="猫の手" ボタン=["保存中…"(押せない) "下書き保存"] | pending=true data="猫の手" method=get action=saveDraft | サーバー=[受付:下書き:猫の手]
  返事のあと: title="" ボタン=["保存" "下書き保存"] | pending=false data=null method=null action=null | サーバー=[受付:下書き:猫の手 → 保存:下書き:猫の手]
  保存を押した直後: title="猫の手" ボタン=["保存中…"(押せない) "下書き保存"] | pending=true data="猫の手" method=get action=save | サーバー=[受付:下書き:猫の手 → 保存:下書き:猫の手 → 受付:猫の手]
  返事のあと: title="" ボタン=["保存" "下書き保存"] | pending=false data=null method=null action=null | サーバー=[受付:下書き:猫の手 → 保存:下書き:猫の手 → 受付:猫の手 → 保存:猫の手]

$ node run.mjs GetMethod
Cannot specify a encType or method for a form that specifies a function as the action. React provides those automatically. They will get overridden.
  送信前: title="" ボタン=["保存"] | pending=false data=null method=null action=null | サーバー=[]
  保存を押した直後: title="猫の手" ボタン=["保存中…"(押せない)] | pending=true data="猫の手" method=get action=save | サーバー=[受付:猫の手]
  返事のあと: title="" ボタン=["保存"] | pending=false data=null method=null action=null | サーバー=[受付:猫の手 → 保存:猫の手]

export function Throwing() {
  async function save(formData: FormData) {
    await Promise.resolve();
    throw new Error(`保存できません: ${formData.get('title')}`);
  }

  return (
    <ErrorBoundary>
      <form action={save}>
        <input name="title" />
        <button type="submit">保存</button>
      </form>
    </ErrorBoundary>
  );
}

$ node run.mjs Throwing
  [onCaughtError] 保存できません: 猫の手
  保存を押したあと: form なし  ボタン=[] | 送信に失敗しました（保存できません: 猫の手） | サーバー=[]