JSX-də Hadisələrin Əlavə Edilməsi

Gəlin indi React-da hadisələrlə işi öyrənək. Məsələn, edək ki, bloka klik edildikdə müəyyən mətnlə alert çıxsın.

Tutaq ki, bizim showMess funksiyamız var, hansı ki, mesajla alert göstərir, və HTML kodunda bir düymə var, ona klik edildikdə biz həmin alert-i görmək istəyirik:

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

Gəlin düyməmizə onclick hadisəsini elə bağlayaq ki, həmin div-ə klik edildikdə showMess funksiyası işləsin. Bunun üçün onClick atributu əlavə etmək lazımdır (məhz camelCase ilə, yəni onClick, onclick yox), və onun içinə həmin hadisə baş verəndə işləyəcək funksiyanı yazmaq lazımdır:

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

Beləliklə, hadisələrlə iş aparılır: atribut əlavə olunur (məsələn, onClick və ya onFocus), atributun dəyəri kimi isə həmin hadisə baş verəndə çağırılacaq metod göstərilir.

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