Реагування на події

Додавання обробників подій

Щоб додати обробник події, вам потрібно спочатку визначити функцію, а потім передати її як проп до відповідного JSX-тегу. Наприклад, ось кнопка, яка поки що нічого не робить:

Ви можете зробити так, щоб він показував повідомлення, коли користувач клацає, виконавши такі три кроки:

1. Оголосіть функцію з іменем handleClick всередині вашого Button компонента.
2. Реалізуйте логіку всередині цієї функції (використовуйте сповіщення для показу повідомлення).
3. Додати onClick={handleClick} до <button> JSX.

Ви визначили функцію handleClick, а потім передали її як проп до <button>. handleClick є обробником події . Функції обробника події:

• Зазвичай визначаються всередині ваших компонентів.
• Мають назви, які починаються з handle, за якими йде назва події.

Зазвичай прийнято називати обробники подій як handle з наступною назвою події. Ви часто бачите onClick={handleClick}, onMouseEnter={handleMouseEnter} і т.д.

Альтернативно, ви можете визначити обробник події в JSX:

<button onClick={function handleClick() {
  alert('You clicked me!');
}}>

Або, більш стисло, за допомогою функції стрілки:

<button onClick={() => {
  alert('You clicked me!');
}}>

Усі ці стилі є еквівалентними. Вбудовані обробники подій зручні для коротких функцій.

// This alert fires when the component renders, not when clicked!
<button onClick={alert('You clicked me!')}>

<button onClick={() => alert('You clicked me!')}>

Читання пропсів в обробниках подій

Оскільки обробники подій оголошуються всередині компонента, вони мають доступ до його пропсів. Ось кнопка, яка при натисканні показує попередження з повідомленням пропу message:

Через це ці дві кнопки показують різні повідомлення. Спробуйте змінити повідомлення, які їм передаються.

Передача обробників подій як пропсів

Для цього передайте проп, який компонент отримує від свого батька, як обробник події, наприклад:

Тут компонент Toolbar рендерить PlayButton та UploadButton:

• PlayButton передає handlePlayClick як проп onClick до Button всередині.
• UploadButton передає () => alert('Uploading!') як проп onClick до Button всередині.

Нарешті, ваш компонент Button приймає проп з назвою onClick. Він передає цей проп безпосередньо вбудованому браузеру <button> за допомогою onClick={onClick}. Це вказує React викликати передану функцію при натисканні.

Якщо ви використовуєте систему проектування, то зазвичай компоненти на кшталт кнопок містять стилі, але не визначають поведінку. Натомість, такі компоненти як PlayButton та UploadButton передаватимуть обробники подій вниз.

Називання реквізитів обробника події

Вбудовані компоненти, такі як <button> та <div> підтримують лише назви подій браузера на кшталт onClick. Однак, якщо ви створюєте власні компоненти, ви можете назвати пропси обробників подій як завгодно.

За домовленістю, пропси обробника події мають починатися з on, а потім з великої літери.

Наприклад, проп Button компонента onClick можна було б назвати onSmash:

У цьому прикладі <button onClick={onSmash}> показує, що браузеру <button> (у нижньому регістрі) все ще потрібен проп з назвою onClick, але ім'я пропу, яке отримає ваш користувацький Button компонент, залежить від вас!

Якщо ваш компонент підтримує декілька взаємодій, ви можете назвати пропси обробників подій для специфічних для програми концепцій. Наприклад, цей компонент Toolbar отримує обробники подій onPlayMovie та onUploadImage:

Зверніть увагу, що компоненту App не потрібно знати , що Toolbar буде робити з onPlayMovie або onUploadImage. Це деталь реалізації Toolbar. Тут Toolbar передає їх як обробники onClick своїм Button, але пізніше він також може викликати їх за допомогою комбінації клавіш. Називання пропсів на честь специфічних для програми взаємодій, як-от onPlayMovie, дає вам змогу гнучко змінювати способи їхнього подальшого використання.

Поширення подій

Обробники подій також перехоплюватимуть події від будь-яких дочірніх компонентів, які може мати ваш компонент. Ми говоримо, що подія "пузириться" або "поширюється" вгору по дереву: вона починається з місця, де сталася, а потім рухається вгору по дереву.

Цей <div> містить дві кнопки. Обидві кнопки <div> та мають власні обробники onClick. Як ви думаєте, які обробники спрацюють при натисканні на кнопку?

Якщо ви натиснете будь-яку з кнопок, спочатку буде виконано її onClick, а потім onClick батьківського <div>. Таким чином, з'являться два повідомлення. Якщо клацнути на самій панелі інструментів, буде запущено лише батьківський <div> onClick.

Зупинка розмноження

Обробники подій отримують об'єкт події як єдиний аргумент. Зазвичай його називають e, що означає "подія". Ви можете використовувати цей об'єкт для читання інформації про подію.

Цей об'єкт події також дозволяє зупинити поширення. Якщо ви хочете, щоб подія не досягла батьківських компонентів, вам потрібно викликати e.stopPropagation(), як це робить компонент Button:

При натисканні на кнопку:

1. React викликає обробник onClick, переданий в <button>.
2. Цей обробник, визначений у Button, робить наступне:
   • Викликає e.stopPropagation(), запобігаючи подальшому пузирюванню події.
   • Викликає функцію onClick, яка є пропсом, переданим з компонента Toolbar.
3. Ця функція, визначена у компоненті Toolbar, відображає власне попередження кнопки.
4. Оскільки розмноження було зупинено, обробник батьківського <div> елемента onClick не запускається.

<div onClickCapture={() => { /* this runs first */ }}>
  <button onClick={e => e.stopPropagation()} />
  <button onClick={e => e.stopPropagation()} />
</div>

function Button({ onClick, children }) {
  return (
    <button onClick={e => {
      e.stopPropagation();
      onClick();
    }}>
      {children}
    </button>
  );
}