События в React

Разработчики выбирают фреймворк React для создания приложений. Потому что в нём легко организовать взаимодействие с пользователем через события. К примеру, событие нажатия на кнопки или пролистывание страницы может быть связано с любой функцией.

Попробуем написать подобную функцию, чтобы в браузере пользователя появлялось сообщение через "alert" при нажатии на кнопку:

function App() {
   function showAlert(){
      alert('Тише, мыши, кот на крыше!');
   }

   return <div>
      <button onClick={showAlert}>Показать сообщение</button>
   </div>;
}

При загрузке страницы сайта с таким кодом, на ней будет кнопка "Показать сообщение". Если кликнуть по этой кнопке, то появится всплывающее окно с сообщением "Тише, мыши, кот на крыше!".

Как можно заметить, в коде был использован обычный атрибут "onClick", который известен тем, кто работал с событиями в JavaScript. Но обратите внимание, что в React должен быть использован именно camelCase. То есть название атрибутов событий должны записываться так: onClick, onFocusб onMouseDown и т.п.

Если требуется передать в такую функцию параметр, то необходимо вызвать стрелочную функцию. Перепишем предыдущий пример, вынося из него часть текста в переменную:

function App() {
   function showAlert(name){
      alert('Тише, ' + name + ', кот на крыше!');
   }

   return <div>
      <button onClick={() => showAlert('мыши')}>Показать сообщение</button>
   </div>;
}