Not ekleme

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.

Örnek çözümü göster

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.

Kendini test et

Yeni not ekle

setNotes([...notes, { id: Date.now().toString(), ____: title, body }]);

Cevabı göster

setNotes([...notes, { id: Date.now().toString(), title: title, body }]);

Yeni not eklerken ne kullanılır?
```
setNotes(/* ? */);
```
- setNotes([...notes, newNote])
- notes = notes.concat(newNote)
- setNotes(notes + newNote)
- notes.push(newNote)
Cevabı göster

setNotes([...notes, newNote]) — setNotes([...notes, newNote]) ile yeni dizi oluşturulur.
Parçayı rolüne eşle

TextInput

Başlık girişi
setTitle

title'ı günceller
setNotes

Notları günceller
Date.now()

Benzersiz id üretir

Sıradaki ders: AsyncStorage

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler