Zenn
🐢

Reactでセレクトボックスのフォームデータを保持する

2024/12/15に公開
Next.js
React
tech

これは何？

タイトルの内容を実装するときにハマったので備忘録

結論

セレクトボックスのプロパティにkeyとdefaultValueを付けてやれば、送信時のバリデーションエラーのときにフォームデータを保持できます。

例：

<form action={formAction}>
    <select
      key={state.formData?.customerId}
      defaultValue={state.formData?.customerId ?? ""}
    >
        <option value="" disabled>
            Select a customer
        </option>
        <option key="hoge" value="hoge">
          fuga
        </option>
    </select>
    :
   （略）
    :
</form>

補足

  • state.formData?.customerIdは、フォームの処理にuseActionStateを使ってるのでこんな書き方にしてます。宣言部は以下のとおりです： 
    • const initialState: State = { message: null, errors: {} };
const [state, formAction] = useActionState(createInvoice, initialState);
  • state.formData?.customerId ?? ""は、フォームの初期値にdisabledの選択肢を設定するためのコードです

うまくいかないパターン

keyの指定をしないとうまくいきません。初期表示は想定通りになりますが、選択肢を選んでsubmitすると、選択した値は保持されず、初期値のSelect a Customerが表示されます。

うまくいった例とのdiff
<form action={formAction}>
    <select
-     key={state.formData?.customerId}
      defaultValue={state.formData?.customerId ?? ""}
    >
        <option value="" disabled>
            Select a customer
        </option>
        <option key="hoge" value="hoge">
          fuga
        </option>
    </select>
    :
   （略）
    :
</form>

備考

1時間くらいハマってしまったので反省です。
参考記事： https://github.com/facebook/react/issues/30580#issuecomment-2537962675

Discussion