React Hook Formを使ってみた

React Hook Formは何をしてくれるのか？

useStateを書いて、状態管理をして、エラーを、、とコードを沢山かかなければいけないところ、
たった数行でおさめてくれる便利もの。
と言った方がよいでしょう。

使用することでフォームのバリデーションやエラーの表示などを簡単に実装できます。

React Hook Formでよく使うコード

実際に使えるコードは以下のドキュメントを見るとよくわかり、
まとまっています。

https://react-hook-form.com/docs/useform

①登録する

...register

②送信する

onSubmit
handleSubmit

③使用する

<FormProvider></FormProvider>
この範囲内でHook Formの情報を読み取って使えますよってタグ。

React Hook Formの何がすごいのか？

error文を詳細に書かなくても実装できる。
...registerさえ書けば、あとはその値を引き継いでくれる。

useStateなど書かなくても、状態変数を持ってくれるのが優秀。

最初戸惑う点

型を当てるときがちょっと大変

例えば、通常のReactコードで型を指定するときに、
正直最近ではChatGPTに聞けばある程度返ってくるのだが、ChatGPTはReact Hook Formの型を知らないので、そこが大変。

でもドキュメントにしっかり乗っているので、必ずみながら実装すること。

値取得して、その値を使用する

正直自分の中で、Propsとか値取得が苦手ということもあるが、ちょっと難しい。
console.logでみながら確実に解消していこう。

onSubmitの使い方がやや難しい

最初はonSubmit関数を定義して、発火するのが難しかった。
しかし、一回できればなれるので最初大変だけどわかってくるはずなので良し。

React Hook Formのコード内容

index.tsx

import { useForm } from 'react-hook-form';
import './App.css';

function App() {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm({ mode: 'onChange' });

  const onSubmit = (data: any) => {
    console.log(data);
  };
  return (
    <div className="form-container">
      <form onSubmit={handleSubmit(onSubmit)}>
        <label htmlFor="name">名前</label>
        <input
          type="text"
          id="name"
          {...register('name', { required: '名前を入力してください' })}
        />
        <p>{errors.name?.message as React.ReactNode}</p>
        <label htmlFor="email">メールアドレス</label>
        <input
          type="email"
          id="email"
          {...register('email', {
            required: 'メールアドレスを入力してください',
          })}
        />
        <p>{errors.email?.message as React.ReactNode}</p>
        <label htmlFor="">パスワード</label>
        <input
          type="password"
          id="password"
          {...register('password', {
            required: 'パスワードを入力してください',
            minLength: {
              value: 8,
              message: 'パスワードは8文字以上にしてください',
            },
          })}
        />
        <p>{errors.password?.message as React.ReactNode}</p>
        <button type="submit">送信する</button>
      </form>
    </div>
  );
}

export default App;