Reactで、表のセルをその場で編集できるようにする方法

import { useEffect, useId, useRef, useState } from 'react';

type Props = {
  value: string;
  label: string; // 入力欄の名前（「ミケの年齢」など）
  validate?: (draft: string) => string | null; // 問題があればメッセージを返す
  onCommit: (draft: string) => void;
};

export function EditableCell({ value, label, validate, onCommit }: Props) {
  // null のときは表示中、文字列のときは編集中（入力欄の中身）
  const [draft, setDraft] = useState<string | null>(null);
  const [error, setError] = useState<string | null>(null);
  const buttonRef = useRef<HTMLButtonElement>(null);
  const focusCell = useRef(false);
  const errorId = useId();

  // 編集を終えたあと、Enter や Escape で終えたときだけセルにフォーカスを戻す
  useEffect(() => {
    if (draft === null && focusCell.current) {
      focusCell.current = false;
      buttonRef.current?.focus();
    }
  }, [draft]);

  const close = (refocus: boolean) => {
    focusCell.current = refocus;
    setError(null);
    setDraft(null);
  };
  const save = (refocus: boolean) => {
    if (draft === null) return;
    const message = validate?.(draft) ?? null;
    if (message) {
      setError(message);
      return;
    }
    if (draft !== value) onCommit(draft);
    close(refocus);
  };

  if (draft === null) {
    return (
      <button ref={buttonRef} type="button" className="cell" aria-label={`${label} ${value}`} onClick={() => setDraft(value)}>
        {value}
      </button>
    );
  }
  return (
    <>
      <input
        autoFocus
        value={draft}
        aria-label={label}
        aria-invalid={error !== null}
        aria-describedby={error ? errorId : undefined}
        onFocus={(e) => e.currentTarget.select()}
        onChange={(e) => {
          setDraft(e.target.value);
          setError(null);
        }}
        onKeyDown={(e) => {
          // 日本語の変換を確定する Enter では、保存しない
          if (e.key === 'Enter' && !e.nativeEvent.isComposing) {
            e.preventDefault();
            save(true);
          } else if (e.key === 'Escape') {
            e.preventDefault();
            close(true);
          }
        }}
        onBlur={() => save(false)}
      />
      {error && <span id={errorId} className="error">{error}</span>}
    </>
  );
}

const validateName = (draft: string) => (draft.trim() === '' ? '名前を入力してください' : null);
const validateAge = (draft: string) => {
  const s = draft.normalize('NFKC').trim();
  return /^\d+$/.test(s) && Number(s) <= 30 ? null : '0〜30の整数で入力してください';
};

export function CatTable({ naive = false }: { naive?: boolean }) {
  const [cats, setCats] = useState(initialCats);
  const update = (id: number, patch: Partial<Cat>) => {
    // 確かめるために、保存が呼ばれた回数を数える
    (window as any).__commits = ((window as any).__commits ?? 0) + 1;
    setCats((prev) => prev.map((c) => (c.id === id ? { ...c, ...patch } : c)));
  };

            <tr key={cat.id}>
              <td>
                <EditableCell value={cat.name} label={`${cat.name}の名前`} validate={validateName}
                  onCommit={(v) => update(cat.id, { name: v.trim() })} />
              </td>
              <td>
                <EditableCell value={String(cat.age)} label={`${cat.name}の年齢`} validate={validateAge}
                  onCommit={(v) => update(cat.id, { age: Number(v.normalize('NFKC').trim()) })} />
              </td>
            </tr>

import { useState } from 'react';

// 比べるための書き方：変換中の Enter の確認も、フォーカスを戻す処理もない
export function NaiveCell({ value, label, onCommit }: { value: string; label: string; onCommit: (draft: string) => void }) {
  const [draft, setDraft] = useState<string | null>(null);

  if (draft === null) {
    return (
      <button type="button" className="cell" aria-label={`${label} ${value}`} onClick={() => setDraft(value)}>
        {value}
      </button>
    );
  }
  return (
    <input
      autoFocus
      value={draft}
      aria-label={label}
      onChange={(e) => setDraft(e.target.value)}
      onKeyDown={(e) => {
        if (e.key === 'Enter') {
          onCommit(draft);
          setDraft(null);
        } else if (e.key === 'Escape') {
          setDraft(null);
        }
      }}
      onBlur={() => {
        onCommit(draft);
        setDraft(null);
      }}
    />
  );
}

開いた直後: ミケ 3 / クロ 7 / シロ 1 | フォーカス: body | 保存 0回
「ミケの年齢」のセルをクリック: ミケ [3] / クロ 7 / シロ 1 | フォーカス: input「ミケの年齢」 選択 0-1 | 保存 0回
「4」と入力: ミケ [4] / クロ 7 / シロ 1 | フォーカス: input「ミケの年齢」 選択 1-1 | 保存 0回
Enter: ミケ 4 / クロ 7 / シロ 1 | フォーカス: button「ミケの年齢 4」 | 保存 1回
「クロの名前」をクリックして「クロスケ」と入力: ミケ 4 / [クロスケ] 7 / シロ 1 | フォーカス: input「クロの名前」 選択 4-4 | 保存 1回
Escape: ミケ 4 / クロ 7 / シロ 1 | フォーカス: button「クロの名前 クロ」 | 保存 1回
「シロの名前」に「ユキ」と入力して、表の外をクリック: ミケ 4 / クロ 7 / ユキ 1 | フォーカス: body | 保存 2回
Tab で先頭のセルに移り Enter: [ミケ] 4 / クロ 7 / ユキ 1 | フォーカス: input「ミケの名前」 選択 0-2 | 保存 2回
「とら」を「トラ」に変換して Enter で確定（CDP で再現）: [トラ] 4 / クロ 7 / ユキ 1 | フォーカス: input「ミケの名前」 選択 2-2 | 保存 2回
もう一度 Enter: トラ 4 / クロ 7 / ユキ 1 | フォーカス: button「トラの名前 トラ」 | 保存 3回

開いた直後: ミケ 3 / クロ 7 / シロ 1 | フォーカス: body | 保存 0回
「ミケの年齢」のセルをクリック: ミケ [3] / クロ 7 / シロ 1 | フォーカス: input「ミケの年齢」 選択 1-1 | 保存 0回
「4」と入力: ミケ [34] / クロ 7 / シロ 1 | フォーカス: input「ミケの年齢」 選択 2-2 | 保存 0回
Enter: ミケ 34 / クロ 7 / シロ 1 | フォーカス: body | 保存 1回
「クロの名前」をクリックして「クロスケ」と入力: ミケ 34 / [クロクロスケ] 7 / シロ 1 | フォーカス: input「クロの名前」 選択 6-6 | 保存 1回
Escape: ミケ 34 / クロ 7 / シロ 1 | フォーカス: body | 保存 1回
「シロの名前」に「ユキ」と入力して、表の外をクリック: ミケ 34 / クロ 7 / シロユキ 1 | フォーカス: body | 保存 2回
Tab で先頭のセルに移り Enter: [ミケ] 34 / クロ 7 / シロユキ 1 | フォーカス: input「ミケの名前」 選択 2-2 | 保存 2回
「とら」を「トラ」に変換して Enter で確定（CDP で再現）: トラ 34 / クロ 7 / シロユキ 1 | フォーカス: body | 保存 3回
もう一度 Enter: トラ 34 / クロ 7 / シロユキ 1 | フォーカス: body | 保存 3回

「ミケの年齢」に「abc」と入力して Enter: ミケ [abc](aria-invalid)「0〜30の整数で入力してください」 / クロ 7 / シロ 1 | フォーカス: input「ミケの年齢」 選択 3-3 | 保存 0回
Backspace: ミケ [ab] / クロ 7 / シロ 1 | フォーカス: input「ミケの年齢」 選択 2-2 | 保存 0回
「31」に打ち直して Enter: ミケ [31](aria-invalid)「0〜30の整数で入力してください」 / クロ 7 / シロ 1 | フォーカス: input「ミケの年齢」 選択 2-2 | 保存 0回
表の外をクリック: ミケ [31](aria-invalid)「0〜30の整数で入力してください」 / クロ 7 / シロ 1 | フォーカス: body | 保存 0回
入力欄に戻り、全角の「５」に打ち直して Enter: ミケ 5 / クロ 7 / シロ 1 | フォーカス: button「ミケの年齢 5」 | 保存 1回
「クロの名前」を空にして Enter: ミケ 5 / [](aria-invalid)「名前を入力してください」 7 / シロ 1 | フォーカス: input「クロの名前」 選択 0-0 | 保存 1回
Escape: ミケ 5 / クロ 7 / シロ 1 | フォーカス: button「クロの名前 クロ」 | 保存 1回

"5"     → "5"    OK
"５"     → "5"    OK
" 12 "  → "12"   OK
"１２"    → "12"   OK
"30"    → "30"   OK
"31"    → "31"   0〜30の整数で入力してください
"-1"    → "-1"   0〜30の整数で入力してください
"2.5"   → "2.5"  0〜30の整数で入力してください
"abc"   → "abc"  0〜30の整数で入力してください
""      → ""     0〜30の整数で入力してください

EditableCell: 入力欄に届いたイベント ["blur","focusout"] / 入力欄の数 0 / 保存 0回
?naive: 入力欄に届いたイベント ["blur","focusout"] / 入力欄の数 0 / 保存 0回