React Native
Form state
Form state yönetimini öğrenirsin.
Form state nesnesi
Bir form birden çok alan içerir: ad, e-posta, parola gibi. Her alan için ayrı useState açmak yerine tek bir nesne state kullanmak daha temizdir. const [form, setForm] = useState({ name: "", email: "" }); tek bir state ile tüm alanları tutar.
Bu yaklaşımda güncelleme yaparken nesne spread kullanırsın: setForm({ ...form, name: "Ayşe" }). Burada ...form mevcut tüm alanları yeni nesneye kopyalar; name ise yeni değerini alır. email alanı değişmeden kalır. Tek state, formu tek bir yerden yönetmeyi kolaylaştırır; gönderirken yalnızca form nesnesini okursun. Bu desen, alan sayısı arttıkça daha da değerli olur.
Computed property ile güncelle
Bazen hangi alanın güncelleneceğini dinamik olarak bilirsin. Örneğin onChangeText işleyicisi alan adını parametre alabilir. Bu durumda hesaplanan özellik (computed property) kullanırsın: setForm({ ...form, [field]: value }).
Burada [field] köşeli parantezler, field değişkeninin değerini özellik adı yapar. Yani field = "email" ise [field]: value aslında email: value olur. Bu sayede tek bir işleyici birden çok alanı yönetebilir: const handleChange = (field, value) => setForm({ ...form, [field]: value });. Bu desen form alanlarını tek bir yerden yönetmenin en sık kullanılan yoludur. Kod tekrarı azalır, okunabilirlik artar.
Uygulama Form state ile iki alan yaz
Bir LoginForm bileşeni yaz. useState ile form state'ini { email: "", password: "" } olarak başlat. İki TextInput döndür: birincisinin value={form.email} ve onChangeText={(text) => setForm({ ...form, email: text })} olsun. İkincisinin value={form.password} ve onChangeText={(text) => setForm({ ...form, password: text })} olsun. İkincisine secureTextEntry prop'u ver.
Örnek çözümü göster
import { useState } from "react";
import { TextInput } from "react-native";
function LoginForm() {
const [form, setForm] = useState({ email: "", password: "" });
return (
<>
<TextInput
value={form.email}
onChangeText={(text) => setForm({ ...form, email: text })}
placeholder="E-posta"
/>
<TextInput
value={form.password}
onChangeText={(text) => setForm({ ...form, password: text })}
placeholder="Parola"
secureTextEntry
/>
</>
);
}
Kendini test et
-
Spread ile bir alan güncelle
setForm({ ____, name: "Ayşe" });
Cevabı göster
setForm({ ...form, name: "Ayşe" });
-
Kavramı rolüne eşle
- form
- Tüm alanları tutar
- setForm
- Form nesnesini günceller
- ...form
- Mevcut alanları açar
- [field]
- Alan adını dinamik yapar
-
Form state'i güncellerken neden ...form kullanılır?
setForm({ ...form, name: text });
- Yeni nesne daha küçük olsun diye
- State'i temizlemek için
- Diğer alanları korumak için
- Yeni alan eklemek için
Cevabı göster
Diğer alanları korumak için — ...form ile güncellenmeyen alanlar korunur.
Sıradaki ders: Validation
