【Nutanix UUIDエクスプローラーを作ってみよう】Next.js特訓フォームの実装

Nutanixクラスタに接続するための「Prism IP」、「ユーザ名」、「パスワード」フォーム入力の制御には、通常入力を必須にしたり、エラーメッセージの実装を作り込む必要があります
そうすると、フォームごとになかなかコードが増えてくし、なによりそれぞれ作るのはメンドウです。。。
というわけで、フォームの制御に Next.js に対応するReact Hook Formを使ってみます
ホーム | React Hook Form - Simple React forms validation

【Nutanix UUIDエクスプローラーを作ってみよう】Next.js特訓
・ログインページをデザイン
・フォーム制御　←イマココ
・とりあえずFetch
・FetchからRouterでページ遷移
・SSR で Fetch する
・・Layoutつくる

今回の成果物

今回の最終形態はコチラ(Github)で公開しています

React Hook Formのインストール

インストールは npm だけなので、簡単
next.jsのプロジェクトのディレクトリにて

# npm install react-hook-form

テスト実装

公式サイトのクイックスタートを参考にしながら進めていきます
サンプルコードの TS を押すと TypeScript 版での実装方法も書かれていて、親切で初心者にもウレシイ
これを参考に、現行のページに導入してみます

1つ目のポイントは、フォームの input に対応する Value を設定

type FormValues = {
  prism_ip: string
  prism_user: string
  prism_pass: string
}

あとは、React Hook Form のお作法に従う

  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<FormValues>()

フォームの input には「{...register("prism_ip")}」という書き方で設定した Value を呼び出します

<input {...register("prism_ip")} type="text" placeholder="Cluster IP" className="input input-info input-bordered m-1 w-64 text-lg" />

inputのオプション

React Hook Form の機能で入力必須にしたり、エラー表示も簡単に
入力必須：{...register("prism_ip", {required: true})}

<input {...register("prism_ip", {required: true})} type="text" placeholder="Cluster IP" className="input input-info input-bordered m-1 w-64 text-lg" />

エラー表示：{errors.prism_ip && 表示する内容}

{errors.prism_ip && <p className='text-red-600'>required.</p>}

インプットされた内容の処理

フォームで入力された内容は、Submitボタンを押されたときに onSubmit={handleSubmit(関数名)}で処理されます

<form onSubmit={handleSubmit(onConnect)}>

一旦、入力内容をコンソールに表示するだけならば

const onConnect: SubmitHandler<FormValues> = data => console.log(data)

実装

ここまでの実装をまとめると

いったんここまで

そもそもフォーム制御するライブラリというものがあるなんて考えてなかったので、はじめはとまどいながら実装してみましたが、一回慣れる手放せません
フォームで受け取ったデータを使っての fetch を次回

konchangakita

KPSを一番楽しんでいたブログ会社の看板を背負いません　転載はご自由にどうぞ