Vendosja e Ngjarjeve në JSX

Tani le të studiojmë punën me ngjarjet në React. Për shembull, le të bëjmë që me klikim në bllok të shfaqet alert me një tekst.

Le të themi se kemi funksionin showMess, që shfaq alert me një mesazh, dhe në kodin HTML ka një buton, me klikim në të cilin ne dëshirojmë të shohim këtë alert:

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

Le ta lidhim ngjarjen onclick në butonin tonë në mënyrë që me klikim në këtë div të ekzekutohet funksioni showMess. Për këtë duhet shtuar atributin onClick (pikërisht në camelCase, pra onClick, jo onclick), dhe në të të specifikohet funksioni që do të ekzekutohet me këtë ngjarje:

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

Kështu ndodh puna me ngjarjet: shtohet një atribut (për shembull, onClick ose onFocus), si vlerë e atributit specifikohet metoda që do të thirret me këtë ngjarje.

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