Closed2
React Hook Form
tutorialやってみた。
React Hook Formの特徴
React Hook Formは制御されていないコンポーネントを採用している為、無駄なレンダリングが少なく、パフォーマンスが良い!!
制御されたコンポーネントは遅い
htmlのformタグは自身が状態を保つので、reactでは通常「制御されたコンポーネント」を採用しています。それだとあらゆるデータの変更に対してイベントハンドラが働きレンダリングが走るので、重くなりがちです。
参考:https://ja.reactjs.org/docs/forms.html
例
export const App = () => {
const {
register,
handleSubmit,
watch,
formState: { errors },
} = useForm<Inputs>();
const onSubmit = (data: any) => console.log(data);
return (
/* "handleSubmit" will validate your inputs before invoking "onSubmit" */
<form onSubmit={handleSubmit(onSubmit)}>
{/* ...register("~")でformの値を保持できる */}
<label htmlFor="firstName">firstName</label>
<input {...register("firstName", { required: "This is required" })} />
{errors.firstName && <p>{errors.firstName.message}</p>}
<label htmlFor="lastName">lastName</label>
<input
{...register("lastName", {
required: "This is required",
maxLength: { value: 4, message: "You exceeded the maxLength" },
})}
/>
{errors.lastName && <p>{errors.lastName.message}</p>}
<label htmlFor="age">age</label>
<input {...register("age")} />
<input type="submit" />
</form>
);
};
register
フォームの値をstateとして登録して様々な場面で使えるようにする。
watch()
registerの値を監視できる。
handleSubmit()
register に入っている値を保持して submit 時の処理を行う。
required
フォームに様々なバリデーションを付けられる。
主な例
- requierd:trueでフィールドが必須。
- maxLength、minLengthで文字入力の最大最小値。
- max,min数値入力の最大最小値。
errorsハンドル
const {
register,
handleSubmit,
watch,
formState: { errors },
} = useForm<Inputs>();
useFormからエラーオブジェクトにアクセスする。
requiredはbooleanの代わりにstringを渡す事で、errors.messageに出来る。
<input {...register("firstName", { required: "This is required" })} />
{errors.firstName && <p>{errors.firstName.message}</p>}
github:https://github.com/gunners6518/React-Hook-Form-Tutorial
useForm
公式ドキュメント参考に。
useFormはフォームの管理するカスタムフック。
オプション
mode
registerをいつ検証するか。デフォルトはonSubmit
reValidateMode
エラー後の再検証をいつするか。デフォルトはonChange
defaultvalue
初期値
resolver
外部の認証ライブラを使用可能。
ここで設定する。
このスクラップは2021/11/19にクローズされました