Özet - react-hook-form
- React kursu
- İleri seviye
- Ders 36/56
- 5 dk
İsim ve e-posta alanlı doğrulamalı bir kayıt formu yazarsın.
Özet - react-hook-form
Bu grupta react-hook-form'un ne olduğunu, register ve handleSubmit kullanımını ve Zod ile model doğrulamayı öğrendin. Şimdi bunları birleştirme zamanı.
Tipik akış: useForm çağır, register ile alanları bağla, handleSubmit ile gönder, hataları formState.errors ile göster. Zod modelsı ile doğrulamayı merkezi yap.
Bir sonraki adımda isim ve e-posta alanlı doğrulamalı bir kayıt formu yazacaksın.
Uygulama Kayıt formu yaz
Aşağıdaki iskeleti tamamla. Ad gerekliRegistrationForm bileşeni yaz. const formModel = z.object({ name: z.string().min(2), email: z.string().email() }); tanımla. useForm({ resolver: zodResolver(formModel) }) çağır; register, handleSubmit ve formState: { errors } al. <form onSubmit={handleSubmit(onSubmit)}> içinde iki input (name ve email) ve {errors.name && koy. <button type="submit">Kaydol</button>. onSubmit = (data) => console.log(data). export default ekle.
Başlangıç kodu
import { useForm } from 'react-hook-form';
import { z } from 'zod';
import { zodResolver } from '@hookform/resolvers/zod';
// RegistrationForm bileşenini buraya yazÖrnek çözüm
import { useForm } from 'react-hook-form';
import { z } from 'zod';
import { zodResolver } from '@hookform/resolvers/zod';
const formModel = z.object({
name: z.string().min(2),
email: z.string().email(),
});
function RegistrationForm() {
const { register, handleSubmit, formState: { errors } } = useForm({ resolver: zodResolver(formModel) });
const onSubmit = (data) => console.log(data);
return (
<form onSubmit={handleSubmit(onSubmit)}>
<input {...register('name')} />
{errors.name && <p>Ad gerekli</p>}
<input {...register('email')} />
<button type="submit">Kaydol</button>
</form>
);
}
export default RegistrationForm;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Bu grupta işlenmeyen konu?
- register
- handleSubmit
- zodResolver
- useTransition Doğru cevap
Açıklama: useTransition bu grupta işlenmedi.
2 handleSubmit kullanımı
<form onSubmit={____(onSubmit)}><form onSubmit={handleSubmit(onSubmit)}>Açıklama: handleSubmit gönderimi sarar.