React Events

React'ta olaylar, kullanıcı etkileşimleri veya diğer bileşenlerden gelen bilgileri ele almak için kullanılır. Bir bileşenin davranışını belirlemek ve etkileşime geçmek için olayları kullanabilirsiniz.

React'ta olaylar, JSX içinde birleştirilmiş olay işleyicileri olarak tanımlanır ve genellikle fonksiyon bileşenleri ile kullanılır.

Tıpkı HTML DOM etkinlikleri gibi, React'de kullanıcı etkinliklerine dayalı eylemler gerçekleştirebilir. React, HTML ile aynı olaylara sahiptir: click, change, mouseover vb.

React’teki olay yönetimi, DOM elementlerindeki olay yönetimi ile oldukça benzerdir. Sadece, bazı küçük sözdizimi farklılıkları bulunmaktadır:

Etkinlik Ekleme

Olay(Event) isimleri, DOM’da lowercase iken, React’te camelCase olarak adlandırılır.

onclick yerine React'e onClick yazılacak.

DOM’da fonksiyon isimleri, ilgili olaya string olarak atanırken, JSX’te direkt fonksiyon olarak atanır.

onclick="shoot()" yerine React'e onClick={shoot} yazılır.

Reacte söz dizimi:

---

<button onClick={shoot}>Take the Shot!</button>

React'ta olaylar, özel JavaScript olaylarına benzerdir, ancak bazı farklılıklar vardır. Olayları ele almak için React bileşenlerine eklenen olay işleyicileri (event handlers) kullanılır.

Örneğin, bir düğmeye tıklandığında bir mesaj göstermek istediğimizi düşünelim. Bu durumu ele almak için aşağıdaki örnek kodu kullanabiliriz:

import React from 'react';

function App {
  function handleClick() {
    alert('Düğmeye tıklandı!');
  }

  render() {
    return (
      <div>
        <button onClick={handleClick}>Tıkla</button>
      </div>
    );
  }
}

export default App;

Yukarıdaki örnekte, <button> öğesi için onClick özelliği ekledik ve bu özelliğe bir olay işleyici fonksiyon olan handleClick fonksiyonunu atadık. handleClick fonksiyonu, düğmeye tıklandığında çalışacak ve basit bir uyarı mesajı gösterecektir.

React olayları, kullanıcı etkileşimleriyle ilgili işlevlerinizi yazmanıza olanak tanır ve React bileşenlerinin dinamik ve etkileşimli olmasını sağlar. Bu, modern web uygulamalarının geliştirilmesinde önemli bir rol oynar ve kullanıcı deneyimini artırmak için önemli bir araçtır.

React'ta olay işleyicileri, sadece tıklamaları ele almakla kalmaz, aynı zamanda birçok farklı kullanıcı etkileşimini de destekler. İşte bazı yaygın kullanılan React olayları ve nasıl kullanıldıklarına dair örnekler:

1. onChange: Bu olay, genellikle bir giriş alanında (input) kullanılır ve kullanıcı metin girdikçe tetiklenir.

İşte React'ta olayları geniş bir biçimde anlatan bir örnek:

  
import React from 'react';

const EventComponent = () => {
  const handleClick = () => {
    alert('Butona tıklandı!');
  };

  const handleChange = (event) => {
    console.log('Input değeri değişti:', event.target.value);
  };

  return (
    <div>
      <button onClick={handleClick}>Tıkla</button>
      <input type="text" onChange={handleChange} />
    </div>
  );
};

export default EventComponent;

Yukarıdaki örnekte, EventComponent adında bir fonksiyon bileşeni tanımladık. İçerisinde iki olay işleyici fonksiyon (handleClick ve handleChange) bulunuyor:

handleClick: Bu olay işleyici, butona tıklandığında tetiklenir ve bir uyarı penceresi görüntüler.

handleChange: Bu olay işleyici, input alanında değer değiştiğinde tetiklenir ve konsola yeni değeri yazar.

Bu örnekte, buton ve input elementleri üzerindeki olayları ele almak için onClick ve onChange gibi olay özniteliklerini kullanıyoruz. Olay işleyiciler, belirtilen olay meydana geldiğinde tetiklenir ve tanımladığımız fonksiyonları çağırır.

React bileşenlerinde olaylar, doğal DOM olaylarına çok benzer bir şekilde çalışır. Bu nedenle, olay adları genellikle küçük harfle başlar ve JSX içinde fonksiyon olarak geçirilir. Olay işleyicileri bileşenin içinde tanımlanabilir ve olayların nasıl ele alınacağını belirleyen işlevleri temsil ederler.

Örneğin, bir liste oluşturup liste elemanlarına tıkladığımızda hangi elemana tıklandığını gösteren basit bir örnek düşünelim:

import React, { useState } from 'react';

const ListComponent = () => {
  const [clickedItem, setClickedItem] = useState('');

  const handleClick = (item) => {
    setClickedItem(item);
  };

  return (
    <div>
      <h2>Seçili Öğe: {clickedItem}</h2>
      <ul>
        <li onClick={() => handleClick('Elma')}>Elma</li>
        <li onClick={() => handleClick('Armut')}>Armut</li>
        <li onClick={() => handleClick('Muz')}>Muz</li>
      </ul>
    </div>
  );
};

export default ListComponent;

Yukarıdaki örnekte, ListComponent adında bir fonksiyon bileşeni tanımladık. İçerisinde clickedItem adında bir durum (state) ve handleClick adında bir olay işleyici fonksiyon bulunmaktadır.

clickedItem, şu anda seçili olan öğenin adını içeren bir durumu temsil eder. handleClick fonksiyonu ise tıklanan liste öğesini alır ve bu öğenin adını clickedItem durumuna kaydeder.

Liste öğelerine tıklama olaylarını ele almak için onClick özniteliğini kullanıyoruz. Bu örnekte, her liste öğesi kendi adını içeren bir metni handleClick fonksiyonuna aktarır.

Örneğin, "Elma" öğesine tıklarsak, handleClick fonksiyonu 'Elma' değerini alır ve clickedItem durumunu 'Elma' olarak ayarlar. Sonuç olarak, "Seçili Öğe: Elma" yazısı ekranda görüntülenir.

React'ta olayları bu şekilde kullanarak, kullanıcı etkileşimlerini yakalayabilir, durumu güncelleyebilir ve kullanıcıyla etkileşime geçebilirsiniz.

2. onSubmit: Bu olay, bir form gönderildiğinde tetiklenir. Genellikle bir formun verilerini sunucuya göndermek için kullanılır.

import React from 'react';

function App {
  handleSubmit(event) {
    event.preventDefault();
    // Form verilerini işleme kodu burada olacak.
  }

  
    return (
      <div>
        <form onSubmit={handleSubmit}>
          <input type="text" />
          <button type="submit">Gönder</button>
        </form>
      </div>
    );
  
}

export default App;

3. onClick ve onMouseOver: Bu olaylar, öğeye tıklandığında veya fare öğenin üzerine gelince tetiklenir.

  
import React from 'react';

function App {
  handleClick() {
    console.log('Düğmeye tıklandı!');
  }

  handleMouseOver() {
    console.log('Fare düğmenin üzerine geldi!');
  }

  
    return (
      <div>
        <button onClick={handleClick} onMouseOver={handleMouseOver}>
          Tıkla
        </button>
      </div>
    );
  
}

export default App;

Varsayılan Davranışı Engelleme:

Bazı durumlarda, olayın varsayılan davranışını engellemek isteyebiliriz. Örneğin, bir bağlantının tıklanınca yeni bir sayfaya yönlendirilmesini engellemek için. Bu durumda, olayın içinde event.preventDefault() yöntemini çağırabiliriz.

function MyComponent() {
  function handleLinkClick(event) {
    event.preventDefault();
    console.log("Bağlantıya tıklandı, ancak sayfaya yönlendirme engellendi.");
  }

  return (
    <div>
      <a href="#" onClick={handleLinkClick}>Bağlantıya tıkla!</a>
    </div>
  );
}

Olay İşleyicilerine Parametre Geçme:

Bazı durumlarda, olay işleyici fonksiyonlarına ek bilgi geçmek isteyebiliriz. Örneğin, bir düğmeye tıklandığında veya bir form gönderildiğinde belirli verilerle ilgili işlemler yapmak isteyebiliriz. Bu durumda, olay işleyici fonksiyonlara parametre geçebiliriz.

function MyComponent() {
  function handleButtonClick(name) {
    console.log(`Merhaba, ${name}! Butona tıklandı.`);
  }

  return (
    <div>
      <button onClick={() => handleButtonClick("Ahmet")}>Tıkla!</button6gt;
    </div>
  );
}

React olayları, JavaScript olaylarının DOM olaylarına benzer bir şekilde çalışır. Bir olayın tetiklendiği bileşen, olaya ilişkin bilgileri içeren bir olay nesnesi alır. Bu olay nesnesi, olay işleyici fonksiyonuna parametre olarak geçirilir.

Örneğin, fare üzerine gelindiğinde ve fare çekildiğinde üzerindeki metni değiştiren bir bileşen düşünelim:

import React, { useState } from 'react';

const HoverComponent = () => {
  const [hovered, setHovered] = useState(false);

  const handleMouseEnter = () => {
    setHovered(true);
  };

  const handleMouseLeave = () => {
    setHovered(false);
  };

  return (
    <div
      onMouseEnter={handleMouseEnter}
      onMouseLeave={handleMouseLeave}
      style={{ backgroundColor: hovered ? 'lightblue' : 'transparent' }}
    >
      {hovered ? 'Fare üzerinde' : 'Fare dışında'}
    </div>
  );
};

export default HoverComponent;

Yukarıdaki örnekte, HoverComponent adında bir fonksiyon bileşeni tanımladık. Bu bileşen, üzerine gelindiğinde arkaplan rengini değiştirir ve "Fare üzerinde" veya "Fare dışında" metnini görüntüler.

hovered adında bir durum (state) kullanarak, fare üzerinde olup olmadığımızı takip ederiz. handleMouseEnter ve handleMouseLeave adında iki olay işleyici fonksiyon, onMouseEnter ve onMouseLeave öznitelikleri aracılığıyla bileşene eklenir.

onMouseEnter olayı, bileşene fare üzerine gelindiğinde tetiklenir ve handleMouseEnter fonksiyonunu çağırır. Bu fonksiyon, hovered durumunu true olarak ayarlar, böylece bileşenin arka plan rengini 'lightblue' olarak değiştirir ve "Fare üzerinde" metnini görüntüler.

onMouseLeave olayı ise fare bileşenden çekildiğinde tetiklenir ve handleMouseLeave fonksiyonunu çağırır. Bu fonksiyon, hovered durumunu false olarak ayarlar, böylece bileşenin arka plan rengini şeffaf olarak ayarlar ve "Fare dışında" metnini görüntüler.

Böylece, fare üzerine gelme ve çıkma olaylarını ele alarak bileşenin davranışını kontrol ediyoruz.

React'ta olayları kullanarak, kullanıcının etkileşimlerine yanıt verebilir ve bileşenlerinizi dinamik hale getirebilirsiniz.

Olayları Bağlamak ve Kaldırmak:

React bileşenleri render edildiğinde olaylar otomatik olarak bağlanır ve bileşenin işlevselliğini sağlamak için kullanılır. Ancak bazen, bileşenin monte edilmesi (mount) veya demonte edilmesi (unmount) sırasında olayları açmak veya kapatmak isteyebilirsiniz. Bunun için useEffect kancası kullanılabilir. Özellikle, alt bileşenler veya olay dinleyicileri eklediğiniz veya kaldırdığınız durumları ele almak için kullanışlıdır.

Örnek olarak, bir butona tıkladığınızda sayacı artıran bir bileşen düşünelim:

  
import React, { useState, useEffect } from 'react';

const CounterComponent = () => {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount((prevCount) => prevCount + 1);
  };

  useEffect(() => {
    document.addEventListener('click', handleClick);
    return () => {
      document.removeEventListener('click', handleClick);
    };
  }, []);

  return (
    <div>
      <h2>Sayaç: {count}</h2>
      <button onClick={handleClick}>Artır</button>
    </div>
  );
};

export default CounterComponent;

Yukarıdaki örnekte, CounterComponent adında bir fonksiyon bileşeni tanımladık. Bileşenin durumu (count) ve handleClick adında bir olay işleyici fonksiyonu var.

handleClick fonksiyonu, butona tıklandığında çalışır ve sayacı bir artırır.

useEffect kancasını kullanarak, bileşen monte edildiğinde ([] ikinci argümanla temsil edilir) document nesnesine bir tıklama olayı dinleyicisi ekleriz. Bu, her tıklamada handleClick fonksiyonunun tetiklenmesine neden olur ve sayacı artırır.

Aynı useEffect kancasında, bileşen demonte edildiğinde (temizleme işlevi) dinleyiciyi kaldırırız. Bu, bileşen kaldırıldığında gereksiz olayların işlenmesini önler.

Bu örnek, bileşenin monte edilmesi ve demonte edilmesi sırasında olayları dinlemek ve kaldırmak için useEffect kancasını nasıl kullandığınızı gösterir.

React'ta olaylarla ilgili daha fazla konu ve senaryo bulunmaktadır.

Bir olay işleyiciye parametre geçirmek, olayı tetikleyen bileşen veya eleman hakkında ek bilgi almak için kullanışlı olabilir. Örneğin, bir liste öğesini silmek için olay işleyiciye silinecek öğenin kimliğini geçirebiliriz:

import React, { useState } from 'react';

const ListComponent = () => {
  const [items, setItems] = useState(['Elma', 'Armut', 'Muz']);

  const handleItemClick = (item) => {
    const updatedItems = items.filter((i) => i !== item);
    setItems(updatedItems);
  };

  return (
    <ul>
      {items.map((item) => (
        <li key={item} onClick={() => handleItemClick(item)}>
          {item}
        </li>
      ))}
    </ul>
  );
};

export default ListComponent;

Yukarıdaki örnekte, ListComponent adında bir fonksiyon bileşeni tanımladık. items adında bir durum (state) ve handleItemClick adında bir olay işleyici fonksiyonumuz var.

handleItemClick fonksiyonu, tıklanan öğeyi filtreleyerek ve kalan öğeleri items durumuna yeniden ayarlayarak öğeyi listeden kaldırır.

Liste öğelerine tıklama olaylarını ele almak için onClick özniteliğini kullanıyoruz. Her liste öğesi, kendi değerini içeren item parametresiyle handleItemClick fonksiyonuna aktarılır.

Olayların Yayılması (Event Propagation):

React bileşenlerinde olaylar yayılabilir. Bu, bir bileşende oluşturulan olayın, bileşenin içinde gömülü olan alt bileşenlere doğru ilerleyebileceği anlamına gelir. Olayların yayılmasını engellemek veya durdurmak için event.stopPropagation() yöntemini kullanabiliriz.

Örneğin, bir iç içe geçmiş bileşen yapısıyla bir div içindeki butona tıklandığında, üst seviye bileşenin de etkilendiği durumu ele alalım:

  
import React from 'react';

const ButtonComponent = ({ onClick }) => {
  return <button onClick={onClick}>Tıkla</button>;
};

const ContainerComponent = () => {
  const handleButtonClick = () => {
    alert('ContainerComponent tıklandı!');
  };

  return (
    <div onClick={handleButtonClick} 
    style={{ border: '1px solid black', padding: '10px' }}>
      <ButtonComponent onClick={() => alert('ButtonComponent tıklandı!')} />
    </div>
  );
};

export default ContainerComponent;

Yukarıdaki örnekte, ButtonComponent adında bir alt bileşen ve ContainerComponent adında bir üst seviye bileşenimiz var. ButtonComponent içindeki butona tıklandığında, aynı zamanda ContainerComponent'in de tıklandığı fark edilir.

Bunu önlemek için ButtonComponent'te onClick olayını ele alırken, olayın yayılmasını engellemek için event.stopPropagation() kullanabiliriz:

const ButtonComponent = ({ onClick }) => {
  const handleClick = (event) => {
    event.stopPropagation();
    onClick();
  };

  return <button onClick={handleClick}>Tıkla</button>;
};

Bu değişiklikle, ButtonComponent içindeki butona tıklandığında sadece ButtonComponent'in onClick olay işleyicisi tetiklenir ve ContainerComponent'in olay işleyicisi etkilenmez.

Bu gibi durumlarda, olayların yayılmasını engellemek için event.stopPropagation() kullanmak önemlidir.

Sanal Olay Nesneleri (Synthetic Event Objects):

React'ta olaylar, gerçek DOM olayları üzerine inşa edilen sentetik (sanal) olay nesneleri (SyntheticEvent) ile temsil edilir. Bu, olayların tarayıcı uyumluluğunu ve performansını artırır. React, gerçek DOM olaylarının farklı tarayıcılarda çalışmasına göre çapraz tarayıcı desteği sağlar.

Örnek olarak, bir input alanına yazı yazdığınızda yazılan değeri yakalayan bir bileşen düşünelim:

import React from 'react';

const InputComponent = () => {
  const handleChange = (event) => {
    console.log('Girilen değer:', event.target.value);
  };

  return <input type="text" onChange={handleChange} />;
};

export default InputComponent;

Yukarıdaki örnekte, InputComponent adında bir fonksiyon bileşeni tanımladık. handleChange adında bir olay işleyici fonksiyonumuz var.

onChange olayını ele alarak, input alanına girilen değeri yakalıyoruz. event.target.value ifadesiyle girilen değeri konsola yazdırıyoruz.

React, olaylar için sentetik (sanal) olay nesneleri kullanarak bu tür işlemleri kolaylaştırır ve tarayıcı uyumluluğunu sağlar.

4025

Gönder