React Hook Form
最近仕事でReact Hook Formを使っているのでここにメモを残す
React Hook Formとは
Reactでフォームを簡潔に書くことができるライブラリ https://react-hook-form.com/
React Hook Formを使うとuseStateを使うよりもレンダー回数を減らせたりバリデーション実装が楽になったりする
import { SubmitHandler, useForm } from 'react-hook-form' // 入力値の型 type LoginInfo = { email: string password: string } export const LoginForm = (): JSX.Element => { const { handleSubmit, register } = useForm<LoginInfo>() // ログインボタンを押したときの処理 const login: SubmitHandler<LoginInfo> = (loginInfo) => { console.log(loginInfo) } return ( <form onSubmit={handleSubmit(login)}> <input type="email" placeholder="email" {...register('email')} /> <input type="password" placeholder="Password" {...register('password')} /> <button type="submit">ログイン</button> </form> ) }
ちなみにsubmitボタンをformタグで囲めない場合は、buttonタグのformプロパティにformのidと同じ文字列を書く
export const LoginForm = (): JSX.Element => { const { handleSubmit, register } = useForm<LoginInfo>() // ログインボタンを押したときの処理 const login: SubmitHandler<LoginInfo> = (loginInfo) => { console.log(loginInfo) } return ( <> <form id="login" onSubmit={handleSubmit(login)}> <input type="email" placeholder="email" {...register('email')} /> <input type="password" placeholder="Password" {...register('password')} /> </form> <button form="login" type="submit">ログイン</button> <> ) }