მოვლენების დამატება JSX-ში

ახლა კი შევისწავლოთ მოვლენებთან მუშაობა React-ში. მაგალითად, მოდით გავაკეთოთ ისე, რომ ბლოკზე დაწკაპუნებით გამოჩნდეს alert გარკვეული ტექსტით.

დავუშვათ, გვაქვს ფუნქცია showMess, რომელიც გამოსახულებას აჩვენებს alert-ში, ხოლო HTML კოდში არის ღილაკი, რომელზე დაწკაპუნებაც ჩვენ გვსურს რომ გამოვიდეს ეს alert:

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

მოდით, მივაბათ ჩვენს ღილაკს მოვლენა onclick ისე, რომ ამ დივზე დაწკაპუნებისას გაეშვას ფუნქცია showMess. ამისთვის საჭიროა დავამატოთ ატრიბუტი onClick (ზუსტად camelCase-ში, ანუ onClick, და არა onclick), ხოლო მასში მივუთითოთ ფუნქცია, რომელიც შესრულდება ამ მოვლენაზე:

jsxfunction App() {
  function showMess() {
    alert('hello');
  }
  
  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>;
}