Meydan okuma: Form ve doğrulama
- React kursu
- İleri seviye
- Ders 55/56
- 6 dk
Zod ile doğrulamalı react-hook-form kayıt formu yazarsın.
Meydan okuma: Form ve doğrulama
Bu meydan okumada react-hook-form ile bir giriş formu yazacaksın. useForm hook'u register ve handleSubmit verir.
Doğrulama için register('email', { required: true }) yazarsın. Hatalar formState.errors içinde toplanır. handleSubmit(onSubmit) ile geçerli formu yakalarsın. Hata mesajını kullanıcıya göstermek için errors.email öğesini yazdırırsın.
Uygulama LoginForm bileşenini yaz
LoginForm yaz. useForm ile register ve handleSubmit al. <form onSubmit={handleSubmit((data) => console.log(data))}> içinde <input {...register('email', { required: true })} /> ve <button type="submit">Gönder</button> koy. Dışa aktar.
Başlangıç kodu
import { useForm } from 'react-hook-form';
// LoginForm bileşenini buraya yazÖrnek çözüm
import { useForm } from 'react-hook-form';
function LoginForm() {
const { register, handleSubmit } = useForm();
return (
<form onSubmit={handleSubmit((data) => console.log(data))}>
<input {...register('email', { required: true })} />
<button type="submit">Gönder</button>
</form>
);
}
export default LoginForm;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 react-hook-form'da hatalar nerede toplanır?
- useState.errors
- register.errors
- formState.errors Doğru cevap
- errors state
Açıklama: formState.errors hataları taşır.
2 Boşluğu doldur: alanı zorunlu yap
<input {...register('email', { ____: true })} /><input {...register('email', { required: true })} />Açıklama: true alanı boş bırakılamaz.