入力項目の多いフォームを「連絡先→お届け先→確認」のようにステップに分ける作り方です。値を親にまとめて持つこと、次へ進む操作をformの送信で扱うこと、「戻る」にtype=”button”を付けることを、検証環 ...

送信ボタンを続けて押しても、注文が1件だけ作られるようにする方法です。送信中にボタンを無効にする書き方、refで止める書き方、formのactionの場合と、サーバー側でIdempotency-Keyを使う方法を確かめました。 ...

Reactのフォームで、バリデーションのエラーを入力中は出さず、欄を離れたら出し、直した瞬間に消したいときの方法です。エラーの代わりに「欄に触れたか」と「送信したか」をstateに持ちます。画面がずれてボタンが押せなくなる問題の対策も ...

‘use server’ を書いた関数を form の action に渡すと、入力は FormData としてサーバーの関数に届きます。Next.js 16 で、送られるリクエストの形、JavaScript ...

お問い合わせフォームなどの入力をlocalStorageに自動保存し、再読み込みやタブを閉じたあとも下書きを戻す方法です。読み込みはuseStateの初期化関数、書き出しはuseEffectで行い、壊れた値や容量不足でも止まらない書き ...

zodのスキーマを1つ書き、zodResolverでreact-hook-formにつなぐと、入力の検証とフォームの値の型が同じスキーマから決まります。バリデーションのルールと型を別々に書きたくないときに使えます。型で防げる書き間違い ...

Reactの入力欄には、valueとonChangeで値をstateに持たせる「制御する」書き方と、defaultValueで初期値だけを渡す「制御しない」書き方があります。描画の回数や初期値の変更、リセットボタンの効き方を比べ、使い ...

入力欄の部品で id を決め打ちにすると、同じ部品を2つ置いたときに id が重なり、2つ目のラベルを押しても1つ目の入力欄にフォーカスが移ります。useId で部品ごとに id を作り、ラベルや説明文と結びつける書き方と、数を数えて ...

送信中・エラー・送信済みのように、いっしょに変わるstateをuseStateで別々に持つと、1つ更新し忘れて、ありえない表示が出ることがあります。useReducerで更新を1つの関数にまとめる書き方と、型やテストでの確かめ方、つま ...

Reactは、同じ場所に描画されたコンポーネントのstateを引き継ぎます。keyに相手のIDなどを渡すと、値が変わったときにコンポーネントを作り直し、子のstateまで初めに戻せます。エフェクトで空にする書き方との違いや、keyに使 ...