Not ekleme
- React Native kursu
- Orta seviye
- Ders 21/116
- 6 dk
Not ekleme formu yazarsın.
Not ekleme formu
Bu derste kullanıcıdan yeni not alacak bir form kuracağız. İki TextInput kullanırız: biri başlık, diğeri içerik için. Her giriş value ve onChangeText ile bir state'e bağlanır.
Form çıktısını state'te tutarız: title ve body. Kullanıcı her yazdığında ilgili state güncellenir. Sonra bir butona basınca yeni notu setNotes ile ekleriz. Bu desen, React Native form ekranlarında karşına çıkacak temel desendir; kullanıcıdan veri alıp state'e aktarmanın standart yoludur.
Uygulama TextInput ile başlık al
NotesApp bileşenine iki yeni state ekle: title ve body (boş dize ile başlat). Bir TextInput ekle; value={title} ve onChangeText={setTitle} ile bağla. Bileşen <Text>Notlar</Text> döndürsün.
Başlangıç kodu
import { useState } from "react";
import { Text } from "react-native";
function NotesApp() {
const [notes, setNotes] = useState([{ id: "1", title: "Alışveriş", body: "Süt, ekmek" }]);
// title ve body için iki state daha ekle (boş dize ile başlat)
// metin giriş bileşenini içe aktar ve bir tane ekle; title state'ine bağla
return <Text>Notlar</Text>;
}Örnek çözüm
import { useState } from "react";
import { Text, TextInput } from "react-native";
function NotesApp() {
const [notes, setNotes] = useState([{ id: "1", title: "Alışveriş", body: "Süt, ekmek" }]);
const [title, setTitle] = useState("");
const [body, setBody] = useState("");
return (
<>
<TextInput value={title} onChangeText={setTitle} />
<Text>Notlar</Text>
</>
);
}Form gönderimi
Kullanıcı bir not yazıp gönderdiğinde yeni notu state'e eklemen gerekir. setNotes([...notes, newNote]) deseniyle mevcut notların sonuna yeni notu eklersin. Yeni notun id'si benzersiz olmalı; Date.now().toString() sık kullanılan bir yöntemdir.
Ekledikten sonra formu temizlemek gerekir: setTitle("") ve setBody("") ile başlık ve içerik state'lerini boşaltırsın. Bu, kullanıcının bir sonraki notu temiz bir form ile yazmasını sağlar. Form gönderimi genelde bir butonun onPress'ine bağlanır; butona basıldığında ekleme fonksiyonu çağrılır.
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Yeni not ekle
setNotes([...notes, { id: Date.now().toString(), ____: title, body }]);setNotes([...notes, { id: Date.now().toString(), title: title, body }]);Açıklama: title ile başlığı bağlarsın.
2 Yeni not eklerken ne kullanılır?
setNotes(/* ? */);- setNotes([...notes, newNote]) Doğru cevap
- notes = notes.concat(newNote)
- setNotes(notes + newNote)
- notes.push(newNote)
Açıklama: setNotes([...notes, newNote]) ile yeni dizi oluşturulur.
3 Parçayı rolüne eşle
| Kavram | Anlamı |
|---|---|
TextInput |
Başlık girişi |
setTitle |
title'ı günceller |
setNotes |
Notları günceller |
Date.now() |
Benzersiz id üretir |