register ve handleSubmit

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 formState.errors içinde tutulur. {errors.name &&

Ad gerekli

} 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. SignupForm 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 &&

E-posta gerekli

} koy. <button type="submit">Gönder</button>. onSubmit = (data) => console.log(data). export default ekle.

Örnek çözümü göster

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;

Kendini test et

Doğrulama hatası nerede tutulur?
- window içinde
- localStorage içinde
- useState içinde
- formState.errors içinde
Cevabı göster

formState.errors içinde — Hatalar formState.errors içinde.

required seçeneği

register('name', { ____: true });

Cevabı göster

register('name', { required: true });

register ve handleSubmit: kavramları eşleştir

errors

Hata nesnesi
register

Alanı bağlar
required

Zorunlu
message

Hata metni

Sıradaki ders: Doğrulama (validation)

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler