📝

React Hook Formを使わずにフォームを作成する方法

2022/08/04に公開

この記事について

この記事ではReact Hook Formを使わずにフォームのバリデーションなどを行う方法について紹介します。関連リソースを下記に示します。

ターミナルで下記のコマンドを実行してコーディングの準備をします。

npx create-next-app --typescript react-non-hook-form
cd react-non-hook-form
mkdir lib
touch lib/validate.ts pages/form.tsx

エディタで下記のファイルを開いて内容を入力します。

ターミナルで下記のコマンドを実行してサーバーを起動します。

npm run dev

ブラウザで http://localhost:3000/form にアクセスします。

Submitボタンをクリックしてバリデーションのエラーメッセージが表示されることを確認します。

React Hook Formを使えばほとんどのユースケースに対応できると思いますが、そうではない場合に出会った時にはこの記事を思い出して自前で実装しようと思います。