JSX'te Olayları Ekleme

Şimdi React'ta olaylarla çalışmayı inceleyelim. Örneğin, bir bloğa tıklandığında belirli bir metinle bir alert görüntülenecek şekilde yapalım.

Bir mesajla alert görüntüleyen showMess adlı bir fonksiyonumuz olduğunu ve HTML kodunda bu alert'i görmek istediğimizde tıklayabileceğimiz bir düğme olduğunu varsayalım:

jsxfunction App() {
  function showMess() {
    alert('hello');
  }
  
  return <div>
    <button>show</button>
  </div>;
}

Şimdi düğmemize, bu div'e tıklandığında showMess fonksiyonunun tetiklenmesi için onclick olayını bağlayalım. Bunun için onClick özniteliğini (camelCase ile, yani onClick, onclick değil) eklememiz ve içinde bu olay tetiklendiğinde çalışacak fonksiyonu belirtmemiz gerekir:

jsxfunction App() {
  function showMess() {
    alert('hello');
  }
  
  return <div>
    <button onClick={showMess}>show</button>
  </div>;
}

Olaylarla çalışma bu şekilde gerçekleşir: Bir öznitelik eklenir (örneğin, onClick veya onFocus), özniteliğin değeri olarak o olay tetiklendiğinde çağrılacak metod belirtilir.

jsxfunction App() {
  function show1() {
    alert(1);
  }
  
  function show2() {
    alert(2);
  }
  
  return <div>
    <button>act1</button>
    <button>act2</button>
  </div>;
}