Özet - Form yönetimi

controlled, validation ve submit'i birleştirerek bir kayıt formu yazarsın.

Özet - Form yönetimi

Bu grupta kontrollü formları, form state'i, doğrulamayı, göndermeyi ve react-hook-form'u öğrendin. Kontrollü girdi value ve onChangeText ile çalışır. Form state nesnesi tüm alanları bir arada tutar; spread ile güncellenir.

Doğrulama errors state'iyle yapılır; hata varsa kırmızı Text ile gösterilir. Gönderme onPress'e bağlanır; erken return ile doğrulama kontrol edilir. react-hook-form useForm ile tüm bunları otomatikleştirir. Şimdi tüm bu parçaları birleştirip çalışan bir kayıt formu yazacaksın. İki alan, doğrulama ve gönderme olacak; kullanıcı geçerli veri girince form gönderecek.

Uygulama Kayıt formu state'i

Bir RegisterForm bileşeni yaz. useState ile form state'ini { name: "", email: "" } olarak başlat. Ayrıca errors state'ini {} olarak başlat.

Örnek çözümü göster

import { useState } from "react";
import { TextInput } from "react-native";

function RegisterForm() {
  const [form, setForm] = useState({ name: "", email: "" });
  const [errors, setErrors] = useState({});
  return null;
}

Uygulama Kayıt formu bileşeni

Bir RegisterForm bileşeni yaz. form state'i { name: "", email: "" }, errors state'i {} olsun. handleSubmit fonksiyonu: form.email.includes("@") değilse setErrors({ email: "Geçersiz" }) yapıp return; geçerse console.log(form). İki TextInput ve bir Button döndür; butona onPress={handleSubmit} ver.

Örnek çözümü göster

import { useState } from "react";
import { Button, TextInput } from "react-native";

function RegisterForm() {
  const [form, setForm] = useState({ name: "", email: "" });
  const [errors, setErrors] = useState({});
  function handleSubmit() {
    if (!form.email.includes("@")) {
      setErrors({ email: "Geçersiz e-posta" });
      return;
    }
    console.log(form);
  }
  return (
    <>
      <TextInput
        value={form.name}
        onChangeText={(t) => setForm({ ...form, name: t })}
        placeholder="Ad"
      />
      <TextInput
        value={form.email}
        onChangeText={(t) => setForm({ ...form, email: t })}
        placeholder="E-posta"
      />
      <Button onPress={handleSubmit} title="Gönder" />
    </>
  );
}

Kendini test et

Kayıt formunda doğrulama ne zaman yapılır?
```
function handleSubmit() { /* ... */ }
```
- Yalnızca bileşen açılınca
- Yalnızca render sırasında
- Gönderme öncesinde
- Hiçbir zaman
Cevabı göster

Gönderme öncesinde — Doğrulama gönderme öncesinde yapılır.

Gönderme işleyicisini çağır

function ____(form) { console.log(form); }

Cevabı göster

function handleSubmit(form) { console.log(form); }

Kavramı rolüne eşle

controlled

value ve onChangeText
form state

Tüm alanları tutar
validation

Kural kontrolü
onPress

Butona bağlar

Sıradaki ders: fetch

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler