Իվենթների կցում JSX-ում

Եկեք այժմ ուսումնասիրենք իրադարձությունների հետ աշխատանքը React-ում: Օրինակ, եկեք անենք, որ բլոկի վրա կտտացնելիս ցուցադրվի alert որոշակի տեքստով:

Ենթադրենք, մենք ունենք showMess ֆունկցիա, որը ցուցադրում է alert հաղորդագրությամբ, իսկ HTML կոդում կա կոճակ, որի վրա կտտացնելուց մենք կցանկանայինք տեսնել այդ alert-ը:

jsxfunction App() {
  function showMess() {
    alert('բարև');
  }
  
  return <div>
    <button>show</button>
  </div>;
}

Եկեք կապենք մեր կոճակին onclick իրադարձությունը այնպես, որ այս դիվի վրա կտտացնելիս աշխատի showMess ֆունկցիան: Դրա համար անհրաժեշտ է ավելացնել onClick ատրիբուտը (հենց camelCase-ով, այսինքն onClick, և ոչ onclick), իսկ դրա մեջ նշել այն ֆունկցիան, որը կկատարվի այս իրադարձության դեպքում:

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

Այսպիսով էլ տեղի է ունենում իրադարձությունների հետ աշխատանքը. ավելացվում է ատրիբուտ (օրինակ՝ onClick կամ onFocus), ատրիբուտի արժեքով նշվում է այն մեթոդը, որը կկանչվի այս իրադարձության դեպքում:

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