今回の記事はReactのフォーム管理で便利なReact-Hook-Formの使い方を初心者向けにご紹介する記事です。React-Hook-Formを用いることで、フォーム管理が非常に簡単に行えるので是非使えるようになりましょう。React初心者でフォームで迷っている方は是非参考にしてください。
React-Hook-Formとは？
Reactでフォーム操作を行う際、useStateで入力値を全て制御することは最も柔軟な対応が可能です。ただ、入力値が多い場合、useStateの管理は複雑になり、レンダリングのことを考えると収拾がつかないことがあります。
これを防ぐのがReact-Hook-Formというライブラリです。
余計なレンダリングを行わず、全てのデータを好きなタイミングで取り出したり、セットしたりすることができます。
また、他のライブラリへの依存もなく、プロジェクトに導入しやすい点も魅力で、さらにコード量も減るため、フォーム操作がある場合は積極的に使うことをおすすめします。
では実際にReactプロジェクトを起動し、React-Hook-Formを使って見ましょう。
TypeScriptのReactプロジェクト作成
node等がインストールされてない方はインストールして下さい。その前提で話を進めます。
npx create-react-app sample --template typescriptまずは上記で「sample」プロジェクトを作成します。
cd sample
npm startこれでローカルサーバが立ち上がって初期画面が表示できます。
ではページ遷移と値渡しの種類に関してご紹介していきます。
React-Hook-Formのインストール
下記コマンドでインストールできます。
npm install react-hook-formでは、実際にReact-Hook-Formをプロジェクトでどのように使うかをコードを用いて解説していきます。
React-Hook-Formの使い方
公式ドキュメントの形を引用し、日本語化と少しわかりやすく説明や命名を変更しています。
「src/App.tsx」ファイルを下記のように編集します。
import React from "react";
import { useForm, SubmitHandler } from "react-hook-form";
// フォームの型
type FormData = {
value1: string,
value2: number,
};
export default function App() {
// useFormメソッド
const { register, handleSubmit, watch, formState: { errors } } = useForm<FormData>();
// 送信ボタン押下時処理
const onSubmit: SubmitHandler<FormData> = formData => {
console.log(formData);
};
// 状態確認
console.log(`現在の値1${watch('value1')}`)
console.log(`現在の値2${watch('value2')}`)
return (
// formタグの部分
<form onSubmit={handleSubmit(onSubmit)}>
{/* 入力欄1 オブジェクトの項目がvalue1なのでregisterにvalue1と記載 */}
<input defaultValue="初期値" {...register('value1')} />
{/* 入力欄2 オブジェクトの項目がvalue2なのでregisterにvalue2と記載 */}
<input {...register('value2', { required: true })} />
{/* 必須チェック引数「required=true」で入力されていない場合エラー文字表示 */}
{errors.value1 && <span>入力欄1未入力</span>}
{errors.value2 && <span>入力欄2未入力</span>}
<input type="submit" />
</form>
);
}これで送信ボタンを押すとコンソールに入力欄の項目が出力されます。
少し解説をおこなっておきます。
// フォームの型
type FormData = {
value1: string,
value2: number,
};
// useFormメソッド
const { register, handleSubmit, watch, formState: { errors } } = useForm<FormData>();TypeScriptベースですのでフォームのオブジェクトは全て型を定義します。これが大規模なプロジェクトでは非常にありがたい。
上記のように定義した型をuseFormの型として定義し、useFormのメソッド「register」「handleSubmit」「watch」「formState（error）」を取得します。使い方はそれぞれ下記です。
- register → 入力値のテキストフィールドとフォームの項目を紐付ける
- handleSubmit → フォームを1つのオブジェクトとして関数内で使用できる
- watch → 状態を確認
- formState（error） → エラーを検出
// formタグの部分
<form onSubmit={handleSubmit(onSubmit)}>
{/* 入力欄1 オブジェクトの項目がvalue1なのでregisterにvalue1と記載 */}
<input defaultValue="初期値" {...register('value1')} />
{/* 入力欄2 オブジェクトの項目がvalue2なのでregisterにvalue2と記載 */}
<input {...register('value2', { required: true })} />
{/* 必須チェック引数「required=true」で入力されていない場合エラー文字表示 */}
{errors.value1 && <span>入力欄1未入力</span>}
{errors.value2 && <span>入力欄2未入力</span>}
<input type="submit" />
</form>上記部分がフォームの入力フォームの部分です。基本的なWebフォームとそこまで差はありません。ただし、いちいちクラス等を記載せずともregisterで全て管理できるのは楽です。
これでUIをMaterialUIt等の優秀なモジュールを使用することで画面を作る難易度が格段に下がります。ただし、MateriUIと併用する場合は一点だけ注意点があるので注意が必要です。
では今回の記事は以上です。他にも多数のReact関連の記事を記載しているので是非興味がある方はサイト内みてください。
コメント