ReactHookForm

安裝React Hook Form

• 安裝React hook form, zod 及 resolvers

npm i react-hook-form zod @hookform/resolvers

使用react hook form

• react hook form 減少刷新率並且方便檢查輸入值

import {useForm} from 'react-hook-form';
const LoginForm = () => {
  const {register,handleSubmit} = useForm();
  const onSubmit = (data: any) => {console.log(data);}
  return (
  <form onSubmit={handleSubmit(onSubmit)}>
    <div className='space-y-4'>
      <Input {...register('email')} label='email' variant='bordered' />
      <Input {...register('password')} label='password' type='password' variant='bordered' />
      <Button type='submit' fullWidth color='secondary'>Login</Button>
    </div>
  </form>
  );
}

使用zod

• Zod方便我們進行form validation
• 先在根目錄建立/lib/schemas/loginSchema.ts

import {z} from "zod";
export const loginSchema = z.object({
  email: z.email({message:"請輸入有效的電子郵件地址"}),
  password: z.string().min(6,{message:"密碼長度至少6位"})
});
export type LoginSchema = z.infer<typeof loginSchema>;

• 回到LoginForm.tsx

'use client';
import { Button, Card, CardBody, CardHeader, Input } from '@heroui/react';
import { zodResolver } from '@hookform/resolvers/zod';
import { useForm } from 'react-hook-form';
import { loginSchema, LoginSchema } from '@/lib/schemas/loginSchema';

const LoginForm = () => {
const {register,handleSubmit, formState:{errors}} = useForm<LoginSchema<({
  mode:'onTouched',
  resolver:zodResolver(loginSchema),
});
const onSubmit = (data:LoginSchema) => {
  console.log(data);
}

<form onSubmit={handleSubmit(onSubmit)}>
  <div className='space-y-4'>
  <Input {...register('email')} isInvalid={!!errors.email} errorMessage={errors.email?.message} defaultValue='' label='email' variant='bordered' />
  <Input {...register('password')} isInvalid={!!errors.password} errorMessage={errors.password?.message} defaultValue='' label='password' type='password' variant='bordered' />
  <Button isDisabled={!isValid} type='submit' fullWidth color='secondary'>Login</Button>
  </div>
</form>
}