Olay nesnesi
- React kursu
- Başlangıç
- Ders 37/84
- 4 dk
Olay işleyiciye gelen event nesnesini kullanmayı öğrenirsin.
Olay nesnesi
React, handler'ı çağırırken bir olay nesnesi (event object) geçirir. Bunu genelde e veya event adıyla alırsın: function handleChange(e) { ... }.
Olay nesnesi, olan bitenle ilgili bilgiler taşır. En sık kullanılanı e.target.value: input'taki güncel metni verir.
Bu nesne, tarayıcının yerel olayına benzer ama React onu sarmalar; davranışı tutarlıdır.
Input dinleme
Bir input'u dinlemek için onChange kullanırsın. Her tuş basışında handler çağrılır ve e.target.value güncel metni verir.
Bu, kontrollü input'ların temelidir; bir sonraki grupta state ile birleştireceğiz. Şimdilik olay nesnesini tanıyalım.
Olay nesnesini kullanmak istemezsen parametre olarak almayabilirsin; React yine de geçirir ama sen görmezden gelirsin.
Uygulama Input dinleyici
Aşağıdaki iskeleti tamamla. TypeWatcher bileşeni yaz; içinde handleChange adında, parametresi e olan bir fonksiyon tanımla (gövdesi boş olabilir). <input onChange={handleChange} /> döndürsün. Dışa aktar.
Başlangıç kodu
// TypeWatcher bileşenini buraya tanımlaÖrnek çözüm
function TypeWatcher() {
function handleChange(e) {}
return <input onChange={handleChange} />;
}
export default TypeWatcher;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Input'taki güncel metni hangi özellik verir?
target is the element where the event happened; value holds the text.- e.type
- e.name
- e.key
- e.target.value Doğru cevap
Açıklama: e.target.value input'un güncel değerini verir.
2 Olay nesnesi: eksik parçayı tamamla
function handleChange(e) { console.log(e.____); }function handleChange(e) { console.log(e.target.value); }Açıklama: e.target.value ile güncel metni yazdırdın.
3 Olay nesnesi: kavramları eşleştir
| Kavram | Anlamı |
|---|---|
e.target |
Olayın olduğu öğe |
e.target.value |
Güncel metin |
e.key |
Basılan tuş |
e.preventDefault() |
Öntanımlıyı engelle |