Todo giriş formu

Yeni todo eklemek için bir kontrollü form yazarsın.

Todo giriş formu

Bu ders TodoForm bileşenini yazacağız. Bir <input> ve bir <button>Ekle</button> içerecek. text state'i input'a value ve onChange ile bağlanır.

Buton tıklanınca setTodos ile yeni bir todo eklenir: { '{ id: Date.now(), text, done: false }' }. Sonra setText("") ile input temizlenir.

Bu desen kontrollü bileşen (controlled component) olarak bilinir: input'un değeri React state'inde tutulur, kullanıcı her yazışında state güncellenir.

Ekleme mantığı

Butona basınca setTodos çağrılır. Yeni dizi, eskilerin sonuna yeni todo eklenmiş halidir: setTodos(prev => [...prev, { '{ id: Date.now(), text, done: false }' }]).

Bu yazım fonksiyonel güncelleme olarak bilinir ve güncel state'e güvenli şekilde erişir. Eski todo'lar bozulmadan yeni dizi oluşturulur; React değişikliği algılar ve listeyi çizim yapar.

Ekleme sonrası setText("") ile input temizlenir. Böylece kullanıcı peş peşe birden çok todo ekleyebilir.

Uygulama TodoForm yaz

Aşağıdaki iskeleti tamamla. TodoForm bileşeni yaz. ({ '{ text, setText, onAdd }' }) parametresi alsın. <form onSubmit={ '{ ... }' }> içinde <input value={ '{ text }' } onChange={ '{ e => setText(e.target.value) }' } placeholder="Görev" /> ve <button>Ekle</button> göster. onSubmit, e.preventDefault() çağırıp onAdd() yapsın. Dışa aktar.

Örnek çözümü göster

function TodoForm({ text, setText, onAdd }) {
  return (
    <form onSubmit={(e) => { e.preventDefault(); onAdd(); }}>
      <input value={text} onChange={(e) => setText(e.target.value)} placeholder="Görev" />
      <button>Ekle</button>
    </form>
  );
}

export default TodoForm;

Kendini test et

Kontrollü input ne demektir?
- Input state'siz çalışır
- Input çizilmez
- Input sadece okunur
- Input'un value'şu state'te tutulur
Cevabı göster

Input'un value'şu state'te tutulur — Kontrollü input value'sunu state'ten alır.

Yeni todo kimliği

Yeni todo için kimlik üretmek amacıyla ____ çağrılır.

Cevabı göster

Yeni todo için kimlik üretmek amacıyla Date.now() çağrılır.

Form parçalarını eşleştir

input

Metin alır
value={text}

Bağlama
onChange

Yazımı yakalar
button

Ekler

Sıradaki ders: Todo listesi

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler