Навязванне падзей у 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>;
}