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

今回の記事は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のインストール

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

npm install react-hook-form

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

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

React-Hook-Formでセレクトボックスの使い方

先ほど作ったReactプロジェクトで「src/App.tsx」を以下のように編集します。

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

// セレクトボックスの選択肢
enum Options {
  option1 = 'option1',
  option2 = 'option2',
  option3 = 'option3'
}

// フォームの型
type FormData = {
  selectValue: string,
};

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>
      {/* セレクトボックスで選んだフォーム */}
      <select {...register('selectValue')} >
        {/* セレクトボックスの選択肢 */}
        <option value='option1'>選択肢1</option>
        <option value='option2'>選択肢2</option>
        <option value='option2'>選択肢3</option>
      </select>
      <input type="submit" />
    </form>
  );
}

少し解説してみます。

<form onSubmit={handleSubmit(onSubmit)}>
      <label>セレクトボックス</label>
      {/* セレクトボックスで選んだフォーム */}
      <select {...register('selectValue')} >
        {/* セレクトボックスの選択肢 */}
        <option value='option1'>選択肢1</option>
        <option value='option2'>選択肢2</option>
        <option value='option2'>選択肢3</option>
      </select>
      <input type="submit" />
    </form>

上記がセレクトボックスを含む入力フォームです。

選択したものをReact-Hook-Formの「register」でフォームオブジェクトに紐づけています。

これでbuildするとセレクトボックスで選択した項目の「value=’option1’」のValue値を「selectValue」にセットしてくれます。