Özet - react-hook-form

İ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. RegistrationForm 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 &&

Ad gerekli

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

Örnek çözümü göster

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;

Kendini test et

Bu grupta işlenmeyen konu?
- register
- handleSubmit
- zodResolver
- useTransition
Cevabı göster

useTransition — useTransition bu grupta işlenmedi.

handleSubmit kullanımı

<form onSubmit={____(onSubmit)}>

Cevabı göster

<form onSubmit={handleSubmit(onSubmit)}>

Sıradaki ders: Framer Motion nedir?

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler