Reactで、＋と−のボタンで数量を変える入力欄を作る方法

import { useId, useState } from 'react';

type Props = {
  label: string;
  value: number;
  onChange: (value: number) => void;
  min: number;
  max: number;
  name?: string;
};

export function QuantityStepper({ label, value, onChange, min, max, name }: Props) {
  const id = useId();
  // 入力欄に打っている途中の文字列。null のときは value をそのまま表示する
  const [draft, setDraft] = useState<string | null>(null);
  // ボタンで変えたときに、読み上げ用に output へ入れる文
  const [announce, setAnnounce] = useState('');

  const clamp = (n: number) => Math.min(max, Math.max(min, n));
  const atMin = value <= min;
  const atMax = value >= max;

  function step(delta: number) {
    const next = clamp(value + delta);
    setDraft(null);
    onChange(next);
    setAnnounce(`${label} ${next}`);
  }

  function handleInput(text: string) {
    setDraft(text);
    const n = Number(text);
    // 範囲内の整数になったときだけ、すぐに親へ伝える
    if (text.trim() !== '' && Number.isInteger(n) && n >= min && n <= max) onChange(n);
  }

  function commit() {
    if (draft === null) return;
    const n = Number(draft);
    // 範囲の外の整数は端にそろえる。空や整数でないときは、最後の正しい値に戻す
    if (draft.trim() !== '' && Number.isInteger(n)) onChange(clamp(n));
    setDraft(null);
  }

  return (
    <div className="stepper">
      <label htmlFor={id}>{label}</label>
      <div className="stepper-controls">
        <button
          type="button"
          aria-label={`${label}を1減らす`}
          aria-controls={id}
          aria-disabled={atMin}
          tabIndex={-1}
          onClick={() => !atMin && step(-1)}
        >
          −
        </button>
        <input
          id={id}
          type="number"
          inputMode="numeric"
          min={min}
          max={max}
          step={1}
          name={name}
          value={draft ?? String(value)}
          onChange={(e) => handleInput(e.target.value)}
          onBlur={commit}
          onKeyDown={(e) => {
            if (e.key === 'Enter') commit();
          }}
        />
        <button
          type="button"
          aria-label={`${label}を1増やす`}
          aria-controls={id}
          aria-disabled={atMax}
          tabIndex={-1}
          onClick={() => !atMax && step(1)}
        >
          ＋
        </button>
      </div>
      <output htmlFor={id} className="visually-hidden">
        {announce}
      </output>
    </div>
  );
}

import { useState } from 'react';
import { QuantityStepper } from './QuantityStepper';

const PRICE = 1200;
const STOCK = 10;

export function App() {
  const [quantity, setQuantity] = useState(1);
  const [sent, setSent] = useState('');

  return (
    <form
      onSubmit={(e) => {
        e.preventDefault();
        setSent(JSON.stringify(Object.fromEntries(new FormData(e.currentTarget))));
      }}
    >
      <p className="item">ねこ用ブラシ（{PRICE.toLocaleString('ja-JP')}円）</p>
      <QuantityStepper label="数量" value={quantity} onChange={setQuantity} min={1} max={STOCK} name="quantity" />
      <p className="note">在庫は{STOCK}個です</p>
      <p className="total">
        小計 <span className="amount">{(PRICE * quantity).toLocaleString('ja-JP')}円</span>
      </p>
      <button type="submit">カートに入れる</button>
      {sent && <p className="sent">送信された値: {sent}</p>}
    </form>
  );
}

マウスで9回クリックしたあと 入力欄: 10 / フォーカスがある要素: body

10 のときに＋をクリック: 入力欄「10」 / 小計 12,000円 / 減らす aria-disabled=false / 増やす aria-disabled=true
フォーカスがある要素: 数量を1増やす のボタン

- text: 数量
- button "数量を1減らす" [disabled]: −
- spinbutton "数量": "1"
- button "数量を1増やす": ＋
- status

ArrowUp: 入力欄「2」 / 小計 2,400円 / 減らす aria-disabled=false / 増やす aria-disabled=false
ArrowUp: 入力欄「3」 / 小計 3,600円 / 減らす aria-disabled=false / 増やす aria-disabled=false
ArrowDown: 入力欄「2」 / 小計 2,400円 / 減らす aria-disabled=false / 増やす aria-disabled=false
ArrowUp を12回: 入力欄「10」 / 小計 12,000円 / 減らす aria-disabled=false / 増やす aria-disabled=true
ArrowDown を12回: 入力欄「1」 / 小計 1,200円 / 減らす aria-disabled=true / 増やす aria-disabled=false

「15」を打つ
  「1」を打つ: 入力欄「1」 / 小計 1,200円 / 減らす aria-disabled=true / 増やす aria-disabled=false
  「5」を打つ: 入力欄「15」 / 小計 1,200円 / 減らす aria-disabled=true / 増やす aria-disabled=false
Tab で離れる: 入力欄「10」 / 小計 12,000円 / 減らす aria-disabled=false / 増やす aria-disabled=true
全部消す
  Backspace: 入力欄「」 / 小計 12,000円 / 減らす aria-disabled=false / 増やす aria-disabled=true
Tab で離れる: 入力欄「10」 / 小計 12,000円 / 減らす aria-disabled=false / 増やす aria-disabled=true
「0」を打つ
  「0」を打つ: 入力欄「0」 / 小計 12,000円 / 減らす aria-disabled=false / 増やす aria-disabled=true
Tab で離れる: 入力欄「1」 / 小計 1,200円 / 減らす aria-disabled=true / 増やす aria-disabled=false

「15」を打つ: 入力欄「15」 / 小計 1,200円 / 減らす aria-disabled=true / 増やす aria-disabled=false
Enter: 入力欄「10」 / 小計 12,000円 / 減らす aria-disabled=false / 増やす aria-disabled=true
送信された値: {"quantity":"10"}

最初の output: ""
＋をクリックしたあとの output: "数量 2"
＋をクリックしたあとの output: "数量 3"
−をクリックしたあとの output: "数量 2"
入力欄に 7 を入れたあとの output: "数量 2"

入力欄で 1 にしてから＋をクリック（output は 数量 2 のまま）: "数量 2" / output の変更の回数: 0
もう一度＋をクリック: "数量 3" / output の変更の回数: 1