controlled input
- React Native kursu
- Başlangıç
- Ders 26/116
- 5 dk
Controlled input ve state öğrenirsin.
Controlled input
React Native'te controlled input, value prop'u bir state'ten gelen ve değişimin yine state'i güncelleyen TextInput'dur. Yani value={name} ile güncel metin state'ten okunur, onChangeText={setName} ile her tuş vuruşu state'e yazılır.
Bu desende veri tek kaynaktan akar: state. Görüntü her zaman state'in yansımasıdır. Bu, doğrulama ve senkronizasyon için tutarlı bir yapı kurar. Bu derste controlled bir TextInput'u nasıl kuracağımızı göreceğiz.
Value ve state akışı
Controlled deseni şöyle kurulur: önce const [name, setName] = useState(""); ile state'i tanımla. Sonra <TextInput value={name} onChangeText={setName} /> ile her iki prop'u da bağla.
Akış: kullanıcı yazınca onChangeText setName'i çağırır, state güncellenir, bileşen yeniden render olur, value={name} güncel metni gösterir. Eğer value prop'unu eklemezsen onChangeText yine çalışır ama alan "uncontrolled" kalır; değer senin elinde tutulmaz.
Uygulama Controlled TextInput kur
useState'i react'ten ve TextInput'u react-native'den içe aktar. name state'i oluştur (ilk değeri boş dize). <TextInput>'u controlled yap: hem value={name} hem onChangeText={setName} prop'ları olsun.
Başlangıç kodu
// useState ve TextInput'u içe aktar
// name state'i oluştur
function App() {
return null;
}Örnek çözüm
import { useState } from "react";
import { TextInput, View } from "react-native";
function App() {
const [name, setName] = useState("");
return (
<View>
<TextInput value={name} onChangeText={setName} />
</View>
);
}Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Controlled input ne demektir?
<TextInput value={name} onChangeText={setName} />- Value state'ten gelir Doğru cevap
- Yalnızca okunabilir
- State kullanılmaz
- Value sabit kalır
Açıklama: Controlled input'ta value bir state'ten gelir.
2 Controlled akışı eşle
| Kavram | Anlamı |
|---|---|
Kullanıcı yazar |
onChangeText tetiklenir |
setName |
State'i günceller |
Re-render |
value güncellenir |
value={name} |
State'ten okur |
3 value prop'u
<TextInput ____={name} onChangeText={setName} /><TextInput value={name} onChangeText={setName} />Açıklama: value prop'u controlled desende güncel metni state'ten okur.