Controlled form
- React Native kursu
- Orta seviye
- Ders 30/116
- 5 dk
Controlled form bileşenini öğrenirsin.
Kontrollü form nedir?
Kontrollü bileşen (controlled component), değeri React state tarafından yönetilen girdidir. React Native'de bir TextInput kontrollü olduğu zaman value prop'u state'ten gelir ve her tuşa basışta onChangeText ile state güncellenir.
Örnek: const [name, setName] = useState(""); ile state açarsın; sonra <TextInput value={name} onChangeText={setName} /> yazarsın. Böylece girdi her zaman React'in bildiği değerdedir; girdiyi okumak istediğinde name'e bakman yeter. Bu yaklaşım, form verisini tek doğru kaynakta tutar; doğrulama ve gönderme işlemlerini kolaylaştırır. Kontrolsüz girdiler ise kendi iç durumlarını taşır ve React ile senkronizasyonu zordur.
value ve onChangeText
Kontrollü bir TextInput iki prop alır. value prop'u girdinin gösterdiği metindir; bunu state'ten verirsin. onChangeText prop'u ise metin değiştiğinde çağrılır; burada setName gibi setter'ı çağırırsın.
Her tuşa basışta şu akış olur: kullanıcı bir harf yazar → React Native onChangeText'i yeni metinle çağırır → sen setName'i çağırınca state güncellenir → bileşen yeniden render edilir → value yeni state'i gösterir. Bu döngü girdinin her zaman React ile senkron kalmasını sağlar. Eğer value verirsen ama onChangeText vermezsen girdi değişmez; kullanıcı yazamaz. Eğer onChangeText verirsen ama value vermezsen girdi yine çalışır ama kontrol sende değildir.
Uygulama Kontrollü TextInput yaz
Bir NameForm bileşeni yaz. useState ile name state'ini boş dize olarak başlat. Dönüşte <TextInput value={name} onChangeText={setName} placeholder="Ad" /> kullan.
Başlangıç kodu
// useState'i içe aktar
// TextInput'u react-native'den içe aktar
function NameForm() {
// name state'ini boş dize olarak başlat
return null;
}Örnek çözüm
import { useState } from "react";
import { TextInput } from "react-native";
function NameForm() {
const [name, setName] = useState("");
return (
<TextInput
value={name}
onChangeText={setName}
placeholder="Ad"
/>
);
}Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Kontrollü TextInput nasıl yazılır?
const [name, setName] = useState("");- <TextInput value={name} />
- <TextInput value={name} onChangeText={setName} /> Doğru cevap
- <TextInput onChangeText={setName} />
- <TextInput defaultValue={name} />
Açıklama: value ve onChangeText birlikte kontrollü girdiyi oluşturur.
2 value prop'unu yaz
<TextInput ____={name} onChangeText={setName} placeholder="Ad" /><TextInput value={name} onChangeText={setName} placeholder="Ad" />Açıklama: value prop'u girdinin gösterdiği metindir.
3 Prop'u rolüne eşle
| Kavram | Anlamı |
|---|---|
value |
Gösterilen metin |
onChangeText |
Metin değişince çağrılır |
useState |
State açar |
setName |
State'i günceller |