useFormについて（はじめての学び

＜useFormとは＞

フォーム入力と状態管理をまとめて面倒見てくれるライブラリ。これにより、useState,value,onChange,FormData,event,.preventDefaultが不要になる。

＜useFormの目的と機能（useStateとの違い）＞
いままで（useState）

const [email, setEmail] = useState('')

const [password, setPassword] = useState('')

<input

  value={email}

  onChange={(e) => setEmail(e.target.value)}

/>

→入力値の保持、onChangeの定義、フォーム送信時の値取得、バリデーション、エラー管理すべて主導で実装。
useFormを使うと
入力値の保持、onChangeの定義、フォーム送信時の値取得、バリデーション、エラー管理をuseFormが代行

＜useFormの主な機能＞

• 入力値の管理（useState不要）

const { register } = useForm()

<input {...register('email')} />

→name=”email”を自動付与、valueを内部で保持、onChangeを自動登録することで、useState完全不要になる。

• submit時にデータをまとめて取得

const onSubmit = (data) => {

  console.log(data.email)

  console.log(data.password)

}

<form onSubmit={handleSubmit(onSubmit)} />

handleSubmit(onSubmit)

これは、

「フォーム送信イベントを横取りして、
入力値を全部集めてから onSubmit に渡す関数」

まず「普通のフォーム送信」では、

useForm を使わない場合

<form onSubmit={(e) => {
  e.preventDefault()

  const formData = new FormData(e.currentTarget)
  const email = formData.get('email')
  const password = formData.get('password')

  console.log(email, password)
}}>

自分でやっていること

• submitイベントを受け取る

• ページ遷移を止める

• input を全部探す

• name属性で値を取得

• 1つずつ取り出す

👉 めんどい＆毎回同じ

useForm を使うとどうなるか

Step① register が「名簿」を作る

<input {...register('email')} />
<input {...register('password')} />

これで useForm は内部的に↓を記憶

{
  email: '（今入力されている値）',
  password: '（今入力されている値）'
}

入力されるたびに、useFormが勝手に更新

Step② handleSubmit が「回収係」

<form onSubmit={handleSubmit(onSubmit)} />

ここで起きていること

1. フォームが submit される

2. handleSubmit が割り込む

3. preventDefault() を自動で実行

4. register された全 input の値を集める

5. ↓こういうオブジェクトを作る

{
  email: 'aaa@example.com',
  password: '12345678'
}

6. その 完成品 を onSubmit に渡す

Step③ onSubmit は「完成品を受け取るだけ」

const onSubmit = (data) => {
  console.log(data.email)
  console.log(data.password)
}

→event も FormData も登場しない

全体の流れを図にすると

<input {...register('email')} />
<input {...register('password')} />

        ↓ 入力

useForm が内部で値を保持
        ↓

<form onSubmit={handleSubmit(onSubmit)} />

        ↓ submit

handleSubmit
  ├─ preventDefault
  ├─ 値を全部集める
  └─ onSubmit(data) を呼ぶ

        ↓

onSubmit({ email, password })

dataは、register で登録された input から来ている

• バリデーション管理

<input {...register('email', { required: true })} />

<input {...register('password', { minLength: 6 })} />

• エラー管理

const {

  formState: { errors }

} = useForm()

{errors.email && <p>必須です</p>}

→エラー用useState不要

• reset（フォーム初期化）
  reset()

＜useState vs useForm：メリデメ比較＞