Özet - Form yönetimi
- React Native kursu
- Orta seviye
- Ders 35/116
- 5 dk
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.
Başlangıç kodu
// useState ve TextInput'u içe aktar
function RegisterForm() {
// form state'ini başlat (name ve email)
// errors state'ini {} ile başlat
return <></>;
}Örnek çözüm
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.
Başlangıç kodu
// useState ve Button, TextInput'u içe aktar
function RegisterForm() {
// form ve errors state'ini başlat
// handleSubmit fonksiyonu: e-posta kontrolü, hata veya console.log
return <></>;
}Örnek çözüm
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" />
</>
);
}Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 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 Doğru cevap
- Hiçbir zaman
Açıklama: Doğrulama gönderme öncesinde yapılır.
2 Gönderme işleyicisini çağır
function ____(form) { console.log(form); }function handleSubmit(form) { console.log(form); }Açıklama: handleSubmit gönderme işleyicisidir.
3 Kavramı rolüne eşle
| Kavram | Anlamı |
|---|---|
controlled |
value ve onChangeText |
form state |
Tüm alanları tutar |
validation |
Kural kontrolü |
onPress |
Butona bağlar |