React Native
Görev ekleme
TextInput ile görev eklemeyi öğrenirsin.
TextInput ile görev ekleme
Bir görev eklemek için TextInput ve bir Button gerekir. TextInput kontrollü bir bileşendir: value prop'u state'ten gelir, onChangeText her tuş basışında state'i günceller. Bu kalıba kontrollü bileşen denir.
Örnek: <TextInput placeholder="Yeni görev" value={task} onChangeText={setTask} />. Burada task state'i yazılan metni tutar. Düğmeye basınca addTask işlevi tasks dizisine yeni bir görev nesnesi ekler ve task'ı boşaltır.
Uygulama Görev ekleme alanını ekle
İskelete TextInput ve Button ekle. TextInput: placeholder="Yeni görev" value={task} onChangeText={setTask}. Button: title="Ekle" onPress={addTask}. İkisini de başlık metninin altına koy. addTask işlevi zaten tanımlı.
Örnek çözümü göster
import React from 'react';
import { SafeAreaView, View, Text, TextInput, Button, StyleSheet } from 'react-native';
export default function App() {
const [task, setTask] = React.useState('');
const [tasks, setTasks] = React.useState([]);
const addTask = () => {
setTasks([...tasks, { id: Date.now().toString(), text: task, done: false }]);
setTask('');
};
return (
<SafeAreaView style={styles.container}>
<Text>Yapılacaklar</Text>
<TextInput placeholder="Yeni görev" value={task} onChangeText={setTask} />
<Button title="Ekle" onPress={addTask} />
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: { flex: 1, padding: 16 }
});
addTask işlevi
addTask işlevi iki şey yapar: yeni bir görev nesnesini tasks dizisine ekler ve yazma alanını boşaltır. Yeni görev nesnesi üç alan taşır: id benzersiz bir tanımlayıcı (genelde Date.now().toString()), text kullanıcının yazdığı metin, done başlangıçta false.
Spread operatörü ... eski diziyi yeni diziye kopyalar: setTasks([...tasks, { id: ..., text: task, done: false }]). Bu, React Native'in değişimi algılaması için gereklidir; tasks.push(yeni) yazarsan dizi aynı referansla kalır ve ekran güncellenmez. İşlevin sonunda setTask('') ile alanı temizlersin.
Kendini test et
-
TextInput placeholder'ını yaz
<TextInput ____="Yeni görev" value={task} onChangeText={setTask} />
Cevabı göster
<TextInput placeholder="Yeni görev" value={task} onChangeText={setTask} />
-
onChangeText ne zaman çağrılır?
<TextInput value={task} onChangeText={setTask} />
- Düğmeye basınca
- Yalnızca odaklanınca
- Yalnızca alan boşalınca
- Her tuş basışında
Cevabı göster
Her tuş basışında — onChangeText her tuş basışında çağrılır.
-
Prop'u işlevine eşle
- value
- Görüntülenen metin
- onChangeText
- Tuş basışta çağrılır
- placeholder
- Boş alan ipucu
- onPress
- Düğme dokunması
Sıradaki ders: Görev listesi
