Todo giriş formu
- React kursu
- Başlangıç
- Ders 78/84
- 5 dk
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.
Başlangıç kodu
// TodoForm bileşenini buraya yazÖrnek çözüm
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;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Kontrollü input ne demektir?
- Input state'siz çalışır
- Input çizilmez
- Input sadece okunur
- Input'un value'şu state'te tutulur Doğru cevap
Açıklama: Kontrollü input value'sunu state'ten alır.
2 Yeni todo kimliği
Yeni todo için kimlik üretmek amacıyla ____ çağrılır.Yeni todo için kimlik üretmek amacıyla Date.now() çağrılır.Açıklama: Date.now() benzersiz bir sayı verir.
3 Form parçalarını eşleştir
| Kavram | Anlamı |
|---|---|
input |
Metin alır |
value={text} |
Bağlama |
onChange |
Yazımı yakalar |
button |
Ekler |