State ve olaylar
- React Native kursu
- Başlangıç
- Ders 114/116
- 6 dk
useState ve onPress ile etkileşim yazarsın.
useState ile durum
Şimdi kullanıcı girdisini ve eklenen ürünleri takip etmek için useState kullanacağız. İki durum değişkeni tanımlarız: text (giriş metni) ve items (eklenen ürünler dizisi). useState'i react paketinden içe aktarırız.
const [text, setText] = useState('');
const [items, setItems] = useState([]);TextInput'un value özelliğini text'e, onChangeText özelliğini setText'e bağlarız. Böylece kullanıcı her tuşa bastığında text güncellenir ve giriş alanı yeniden render edilir.
onPress ile ekle
Ürün eklemek için bir Button koyarız. Butona basıldığında onPress olayı tetiklenir; burada text'i items dizisine ekler ve text'i boşaltırız. Böylece kullanıcı ürün ekledikçe liste büyür.
<Button
title="Ekle"
onPress={() => {
setItems([...items, text]);
setText('');
}}
/>[...items, text] ile eski dizinin sonuna yeni ürünü ekleriz. setText('') ile giriş alanını temizleriz. Eklenen ürünleri items.map ile ekranda gösteririz.
Uygulama Sıra sende: state ve ekleme butonu
useState'i react'ten içe aktar. App içinde text ve items için iki useState tanımla. TextInput'a value={text} ve onChangeText={setText} ver. Bir <Button title="Ekle" /> ekle ve onPress'inde setItems([...items, text]) ve setText('') çağır.
Başlangıç kodu
import { View, Text, TextInput, StyleSheet } from 'react-native';
export default function App() {
// text ve items için state ekle
return (
<View style={styles.container}>
<Text>Alışveriş Listesi</Text>
<TextInput placeholder="Ürün adı" style={styles.input} />
{/* Ekle butonu ekle */}
</View>
);
}
const styles = StyleSheet.create({
container: { flex: 1, padding: 16 },
input: { borderWidth: 1, padding: 8, marginBottom: 8 },
});Örnek çözüm
import { useState } from 'react';
import { View, Text, TextInput, Button, StyleSheet } from 'react-native';
export default function App() {
const [text, setText] = useState('');
const [items, setItems] = useState([]);
return (
<View style={styles.container}>
<Text>Alışveriş Listesi</Text>
<TextInput value={text} onChangeText={setText} placeholder="Ürün adı" style={styles.input} />
<Button title="Ekle" onPress={() => { setItems([...items, text]); setText(''); }} />
</View>
);
}
const styles = StyleSheet.create({
container: { flex: 1, padding: 16 },
input: { borderWidth: 1, padding: 8, marginBottom: 8 },
});Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 useState ne döndürür?
const [v, setV] = useState(0)- Bir bileşen
- Bir dize
- Bir dizi: [değer, işlev] Doğru cevap
- Bir sayı
Açıklama: useState [değer, işlev] ikilisi döndürür.
2 Boşluğu doldur: useState çağrısı
const [text, setText] = ____('');const [text, setText] = useState('');Açıklama: useState ile durum tutarsın.
3 Eşleştir: kavram ve kullanımı
| Kavram | Anlamı |
|---|---|
useState |
durum tutma |
onPress |
buton basma |
setText |
durum güncelleme |