📝

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

2022/08/04に公開約1,000字

この記事について

この記事では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

コーディング

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

lib/validate.ts

pages/form.tsx

動作確認

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

npm run dev

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

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

参考画像

おわりに

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

GitHubで編集を提案

Discussion

ログインするとコメントできます