Görev ekleme
- React Native kursu
- Başlangıç
- Ders 49/116
- 6 dk
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ı.
Başlangıç kodu
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>
{/* görev ekleme alanını buraya ekle */}
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: { flex: 1, padding: 16 }
});Örnek çözüm
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.
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 TextInput placeholder'ını yaz
<TextInput ____="Yeni görev" value={task} onChangeText={setTask} /><TextInput placeholder="Yeni görev" value={task} onChangeText={setTask} />Açıklama: placeholder boş alanda gösterilen ipucu metnidir.
2 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 Doğru cevap
Açıklama: onChangeText her tuş basışında çağrılır.
3 Prop'u işlevine eşle
| Kavram | Anlamı |
|---|---|
value |
Görüntülenen metin |
onChangeText |
Tuş basışta çağrılır |
placeholder |
Boş alan ipucu |
onPress |
Düğme dokunması |