register ve handleSubmit
- React kursu
- İleri seviye
- Ders 34/56
- 4 dk
register ile alan bağlamayı öğrenirsin.
register ayrıntıları
register fonksiyonu bir alan adı ve opsiyonel doğrulama seçenekleri alır. register('name', { required: true }) alanı zorunlu yapar.
Hatalar Ad gerekliformState.errors içinde tutulur. {errors.name && ile hata mesajını gösterebilirsin.
react-hook-form, her alan için ayrı state tutmaz; bu yüzden binlerce alanlı formlarda bile hızlı çalışır.
formState.errors
formState.errors nesnesi, her alandaki hatayı içerir. errors.name?.type === 'required' ile hatanın türünü kontrol edersin.
Hata mesajını opsiyonel olarak register('name', { required: 'Ad gerekli' }) biçiminde verebilirsin; bu, errors.name?.message ile okunur.
Bu yapı, kod tekrarını azaltır ve hata yönetimini tek yerde toplar.
Uygulama Doğrulamalı form yaz
Aşağıdaki iskeleti tamamla. E-posta gerekliSignupForm bileşeni yaz. useForm çağır; register, handleSubmit ve formState: { errors } al. <form onSubmit={handleSubmit(onSubmit)}> içinde <input {...register('email', { required: true })} /> ve {errors.email && koy. <button type="submit">Gönder</button>. onSubmit = (data) => console.log(data). export default ekle.
Başlangıç kodu
import { useForm } from 'react-hook-form';
// SignupForm bileşenini buraya yazÖrnek çözüm
import { useForm } from 'react-hook-form';
function SignupForm() {
const { register, handleSubmit, formState: { errors } } = useForm();
const onSubmit = (data) => console.log(data);
return (
<form onSubmit={handleSubmit(onSubmit)}>
<input {...register('email', { required: true })} />
{errors.email && <p>E-posta gerekli</p>}
<button type="submit">Gönder</button>
</form>
);
}
export default SignupForm;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Doğrulama hatası nerede tutulur?
- window içinde
- localStorage içinde
- useState içinde
- formState.errors içinde Doğru cevap
Açıklama: Hatalar formState.errors içinde.
2 required seçeneği
register('name', { ____: true });register('name', { required: true });Açıklama: required alanı zorunlu yapar.
3 register ve handleSubmit: kavramları eşleştir
| Kavram | Anlamı |
|---|---|
errors |
Hata nesnesi |
register |
Alanı bağlar |
required |
Zorunlu |
message |
Hata metni |