Olay nesnesi

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.

Örnek çözümü göster

function TypeWatcher() {
  function handleChange(e) {}
  return <input onChange={handleChange} />;
}

export default TypeWatcher;

Kendini test et

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
Cevabı göster

e.target.value — e.target.value input'un güncel değerini verir.

Olay nesnesi: eksik parçayı tamamla

function handleChange(e) { console.log(e.____); }

Cevabı göster

function handleChange(e) { console.log(e.target.value); }

Olay nesnesi: kavramları eşleştir

e.target

Olayın olduğu öğe
e.target.value

Güncel metin
e.key

Basılan tuş
e.preventDefault()

Öntanımlıyı engelle

Sıradaki ders: Form olayları

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler