React Native
State ve olaylar
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.
Örnek çözümü göster
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 },
});
Kendini test et
-
useState ne döndürür?
const [v, setV] = useState(0)
- Bir bileşen
- Bir dize
- Bir dizi: [değer, işlev]
- Bir sayı
Cevabı göster
Bir dizi: [değer, işlev] — useState [değer, işlev] ikilisi döndürür.
-
Boşluğu doldur: useState çağrısı
const [text, setText] = ____('');
Cevabı göster
const [text, setText] = useState('');
-
Eşleştir: kavram ve kullanımı
- useState
- durum tutma
- onPress
- buton basma
- setText
- durum güncelleme
Sıradaki ders: Navigation
