Реагирование на события в React

Введение

Добро пожаловать в документацию по React! В этом практическом занятии вы познакомитесь с обработкой событий.

Это Guided Lab, который предоставляет пошаговые инструкции, чтобы помочь вам учиться и практиковаться. Внимательно следуйте инструкциям, чтобы выполнить каждый шаг и получить практический опыт. Исторические данные показывают, что это лабораторная работа уровня начальный с процентом завершения 97%. Он получил 96% положительных отзывов от учащихся.

Обработка событий

Виртуальная машина уже содержит проект React. В общем случае, вам нужно только добавить код в App.js.

Для установки зависимостей используйте следующую команду:

npm i

React позволяет добавлять обработчики событий в свой JSX. Обработчики событий — это ваши собственные функции, которые будут вызываться в ответ на взаимодействия, такие как нажатие кнопки, наведение курсора, фокус на элементах форм и т.д.

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

// App.js
export default function Button() {
  return <button>I don't do anything</button>;
}

Вы можете сделать так, чтобы она показывала сообщение при нажатии пользователем, выполнив следующие три шага:

Объявите функцию с именем handleClick внутри компонента Button.
Реализуйте логику внутри этой функции (используйте alert, чтобы показать сообщение).
Добавьте onClick={handleClick} в JSX-тег <button>.

export default function Button() {
  function handleClick() {
    alert("You clicked me!");
  }

  return <button onClick={handleClick}>Click me</button>;
}

Вы определили функцию handleClick и затем передали ее в качестве свойства в <button>. handleClick — это обработчик событий. Функции обработчиков событий:

обычно определяются внутри ваших компонентов; имеют имена, начинающиеся с handle, за которым следует имя события.

Для запуска проекта используйте следующую команду. Затем можно обновить вкладку Web 8080, чтобы просмотреть веб-страницу.

npm start

По соглашению, обычно имена обработчиков событий начинаются с handle, за которым следует имя события. Часто вы будете видеть onClick={handleClick}, onMouseEnter={handleMouseEnter} и т.д.

Альтернативно вы можете определить обработчик событий прямо в JSX:

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

Или, более кратко, с использованием стрелочной функции:

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

Все эти стили эквивалентны. Встроенные обработчики событий удобны для коротких функций.

Резюме

Поздравляем! Вы завершили практическое занятие по обработке событий. Вы можете выполнить больше практических занятий в LabEx, чтобы улучшить свои навыки.