Form state
- React Native kursu
- Orta seviye
- Ders 31/116
- 5 dk
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.
Başlangıç kodu
// useState'i içe aktar
// TextInput'u react-native'den içe aktar
function LoginForm() {
// form state'ini başlat (email ve password)
return <></>;
}Örnek çözüm
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
/>
</>
);
}Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Spread ile bir alan güncelle
setForm({ ____, name: "Ayşe" });setForm({ ...form, name: "Ayşe" });Açıklama: ...form ile mevcut alanları yeni nesneye kopyalarsın.
2 Kavramı rolüne eşle
| Kavram | Anlamı |
|---|---|
form |
Tüm alanları tutar |
setForm |
Form nesnesini günceller |
...form |
Mevcut alanları açar |
[field] |
Alan adını dinamik yapar |
3 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 Doğru cevap
- Yeni alan eklemek için
Açıklama: ...form ile güncellenmeyen alanlar korunur.