【React】React-Hook-Formでチェックボックスを実装する方法ご紹介。

TypeScript

2022.05.06

今回の記事はTypeScriptベースのReactプロジェクトでReact-Hook-Formを利用してチェックボックスを使用する方法に関してご紹介します。React-Hook-Formを利用することでチェックボックスの選択肢や、選択した行の取得が簡単にできます。そのため、是非活用できるように、困っている方は本記事参考にしていただけると幸いです。

TypeScriptのReactプロジェクト作成
React-Hook-Formのインストール
React-Hook-Formでチェックボックス実装

TypeScriptのReactプロジェクト作成

node等がインストールされてない方はインストールして下さい。その前提で話を進めます。

npx create-react-app sample --template typescript

まずは上記で「sample」プロジェクトを作成します。

cd sample
npm start

これでローカルサーバが立ち上がって初期画面が表示できます。

ではReact-Hook-Formをインストールします。

React-Hook-Formのインストール

下記コマンドでインストールできます。

npm install react-hook-form

では、実際にReact-Hook-Formの詳しい使い方入門に関しては別で記事を記載しているので下記記事を参考にしてください。

【React】React-Hook-Formの使い方ご紹介。

React-Hook-Formでチェックボックス実装

最小実装をご紹介します。「src/App.tsx」を編集します。

import { useForm, SubmitHandler } from "react-hook-form";

// フォームの型
type FormData = {
  checked: boolean,
};

export default function App() {
  // useFormメソッド
  const { register, handleSubmit } = useForm<FormData>();

  // 送信ボタン押下時処理
  const onSubmit: SubmitHandler<FormData> = formData => {
    console.log(formData);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label>チェックボックス</label>
      {/* チェックボックスフォーム */}
      <input
            type='checkbox'
            {...register('checked', {})}
          />
      <input type="submit" />
    </form>
  );
}

解説を行います。

フォームの型は下記です。

type FormData = {
  checked: boolean,
};

チェックされると「true」、チェックが外れると「false」になる真偽値です。React-Hook-Formが自動で制御してくれます。

送信ボタンは現在のチェックフォームがどのような値になっているかを確認できるようにフォームをコンソールに出力します。

フォームのinputタグでは、下記のようにチェックボックスの記述をしています。

<form onSubmit={handleSubmit(onSubmit)}>
      <label>チェックボックス</label>
      {/* チェックボックスフォーム */}
      <input
            type='checkbox'
            {...register('checked', {})}
          />
      <input type="submit" />
    </form>

これで「npm start」で動かせば問題なくコンソールにチェックボックスのフォームが出力されていることが確認できると思います。