【React】React Hook Formの "はじめる" を始めてみた Part2【Typescript】

この記事はReact Hook Formの公式サイトにあるはじめるの項目を元に構成されています。ReactとTypescriptのサンプルコードを使って解説しています。

こんにちは！らびです。今回はReact Hook Formに関する記事です。

公式サイトのチュートリアルを使って一緒に勉強していきましょう。

フィールドを登録する
import
register
まとめ
参考

フィールドを登録する

それでは今回もサンプルコードを解説していきましょう。React Hook FormのサンプルコードをReactのプロジェクトにうつしたものがこちらです。

import React from 'react';
import { useForm, SubmitHandler } from "react-hook-form";
import {List, ListItem} from '@mui/material';
import ResponsiveDrawer from '../components/layout/ResponsiveDrawer';

enum GenderEnum {
  female = "female",
  male = "male",
  other = "other"
}

interface IFormInput {
  firstName: String;
  gender: GenderEnum;
}

const Home2 = () => {
  const { register, handleSubmit } = useForm<IFormInput>();
  const onSubmit: SubmitHandler<IFormInput> = (data) => {
    console.log(data);
  }
  
  return (
    <ResponsiveDrawer>
      <div>
        <form onSubmit={handleSubmit(onSubmit)}>
          <List>
            <ListItem>
              <label>First Name</label>
              <input {...register("firstName")} />
            </ListItem><ListItem>
              <label>Gender Selection</label>
                <select {...register("gender")} >
                  <option value="female">female</option>
                  <option value="male">male</option>
                  <option value="other">other</option>
                </select>
            </ListItem>
            <ListItem>
              <input type="submit" />
            </ListItem>
          </List>
        </form>
      </div>
    </ResponsiveDrawer>
  );
}
  
export default Home2;

実行結果はこちらだジョ。

f:id:nomurabbit:20220109191954p:plain

import

まずはimportです。前回と同じくuseFormとSubmitHandlerをインポートしています。

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

useFormは入力コンポーネントの登録、SubmitHandlerはサブミット時の処理を制御するのに使うんでしたね。

enum GenderEnum {
  female = "female",
  male = "male",
  other = "other"
}

interface IFormInput {
  firstName: String;
  gender: GenderEnum;
}
…省略
const { register, handleSubmit } = useForm<IFormInput>();
…

useFormのジェネリクスパラメータとしてIFormInputを渡しているジョ。

firstNameという名前とgenderという名前の入力コンポーネントを扱うということですね。

register

次は入力コンポーネントの登録です。inputタグの入力コンポーネントを firstName、selectタグの入力コンポーネントをgenderという名前で登録しています。

const onSubmit: SubmitHandler<IFormInput> = (data) => {
  console.log(data);
}

return (
  <ResponsiveDrawer>
    <div>
      <form onSubmit={handleSubmit(onSubmit)}>
        <List>
          <ListItem>
            <label>First Name</label>
            <input {...register("firstName")} />
          </ListItem><ListItem>
            <label>Gender Selection</label>
              <select {...register("gender")} >
                <option value="female">female</option>
                <option value="male">male</option>
                <option value="other">other</option>
              </select>
          </ListItem>
          <ListItem>
            <input type="submit" />
          </ListItem>
        </List>
      </form>
    </div>
  </ResponsiveDrawer>
);