Обработка событий в React: Руководство для начинающих по onClick

Введение

В веб-разработке обработка событий — это процесс реагирования на действия пользователя, такие как клики, нажатия клавиш или движения мыши. React предоставляет простой и декларативный способ обработки этих событий, делая ваши приложения интерактивными.

Система событий React является оберткой над нативной системой событий браузера. Имена событий пишутся в camelCase, например onClick вместо onclick. Вы передаете функцию в качестве обработчика событий, а не строку.

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

К концу этой лабораторной работы вы сможете:

Прикрепить обработчик события onClick к кнопке.
Определить функцию-обработчик внутри компонента.
Правильно передать функцию-обработчик в атрибут события.
Получить доступ к объекту события для получения информации о событии.
Предотвратить действие браузера по умолчанию с помощью event.preventDefault().

Добавьте атрибут onClick к элементу button

На этом шаге вы начнете с настройки среды разработки, а затем добавите атрибут onClick к элементу <button>. Это первый шаг к тому, чтобы сделать элемент интерактивным в React.

Сначала перейдем в каталог проекта, установим необходимые зависимости и запустим сервер разработки.

Откройте терминал в WebIDE и выполните следующие команды поочередно:

cd my-app

npm install

npm run dev -- --host 0.0.0.0 --port 8080

После выполнения команды npm run dev вы увидите вывод, указывающий, что сервер разработки запущен. Теперь вы можете просмотреть свое приложение, переключившись на вкладку Web 8080 в интерфейсе LabEx. Вы должны увидеть простую кнопку "Click me".

Теперь добавим обработчик событий. Откройте файл src/App.jsx из файлового проводника в левой части WebIDE.

Ваш файл src/App.jsx в настоящее время выглядит следующим образом:

function App() {
  return <button>Click me</button>;
}

export default App;

Чтобы реагировать на клик, вам нужно добавить атрибут onClick к элементу <button>. В React атрибуты событий пишутся в camelCase. Пока что мы передадим ему пустую стрелочную функцию (inline arrow function).

Измените элемент <button> в src/App.jsx следующим образом:

function App() {
  return <button onClick={() => {}}>Click me</button>;
}

export default App;

Сохраните файл. Хотя нажатие на кнопку пока ничего видимого не сделает, вы успешно прикрепили к ней слушатель событий.

Определите функцию-обработчик внутри компонента

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

Вместо того чтобы писать логику непосредственно в атрибуте onClick в JSX, лучше определить отдельную функцию. Давайте создадим функцию с именем handleClick.

В вашем файле src/App.jsx определите функцию handleClick внутри компонента App, перед оператором return. Пока что эта функция будет просто выводить сообщение в консоль.

Обновите ваш файл src/App.jsx следующим кодом:

function App() {
  function handleClick() {
    console.log("Button was clicked!");
  }

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

export default App;

На данном этапе вы определили функцию handleClick, но она еще не связана с событием onClick кнопки. На следующем шаге вы узнаете, как передать эту функцию в атрибут onClick.

Передайте обработчик в onClick без скобок

На этом шаге вы подключите функцию handleClick, которую вы определили, к событию onClick кнопки. Очень важно передать саму ссылку на функцию, а не результат ее вызова.

Чтобы использовать вашу функцию handleClick в качестве обработчика событий, вам нужно передать ее в атрибут onClick внутри фигурных скобок {}.

Измените элемент <button> в src/App.jsx, чтобы передать handleClick в onClick:

function App() {
  function handleClick() {
    console.log("Button was clicked!");
  }

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

export default App;

Обратите внимание, что мы пишем onClick={handleClick}, а не onClick={handleClick()}.

onClick={handleClick} передает саму функцию. React вызовет эту функцию при нажатии на кнопку.
onClick={handleClick()} немедленно вызовет функцию при рендеринге компонента и передаст ее возвращаемое значение (которое является undefined) в onClick. Это распространенная ошибка новичков.

Теперь давайте протестируем.

Сохраните файл src/App.jsx.
Перейдите на вкладку Web 8080.
Откройте консоль разработчика браузера. Вы можете сделать это, щелкнув правой кнопкой мыши на странице, выбрав "Inspect" (Проверить), а затем перейдя на вкладку "Console" (Консоль).
Нажмите кнопку "Click me".

Вы должны увидеть сообщение "Button was clicked!" в консоли каждый раз, когда нажимаете на кнопку.

Вывод консоли, показывающий сообщение о нажатии кнопки

Доступ к объекту события в параметре обработчика

На этом шаге вы узнаете, как получить доступ к объекту события, который React автоматически передает вашему обработчику событий. Этот объект содержит полезную информацию о взаимодействии пользователя.

React передает объект "синтетического события" (synthetic event) каждому обработчику событий в качестве первого аргумента. Этот объект представляет собой кроссбраузерную обертку над нативным событием браузера, предоставляя унифицированный API.

Чтобы получить к нему доступ, вам нужно добавить параметр в вашу функцию handleClick. Его принято называть event или e. Давайте изменим функцию, чтобы она принимала этот параметр и выводила его в консоль.

Обновите ваш файл src/App.jsx:

function App() {
  function handleClick(event) {
    console.log(event);
  }

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

export default App;

Теперь сохраните файл и вернитесь на вкладку Web 8080. Убедитесь, что консоль разработчика все еще открыта. При нажатии на кнопку вы больше не увидите простую строку. Вместо этого в консоли будет выведен объект SyntheticBaseEvent.

Вывод консоли, показывающий объект синтетического события React

Вы можете развернуть этот объект в консоли, чтобы просмотреть его свойства. Например, вы можете найти:

event.type: Тип события (например, "click").
event.target: DOM-элемент, который вызвал событие (кнопка <button>).

Этот объект события является мощным инструментом, позволяющим считывать информацию и управлять поведением события.

Предотвратите действие по умолчанию с помощью event.preventDefault()

На этом шаге вы узнаете, как предотвратить действие по умолчанию, связанное с событием в браузере. Это распространенная задача, особенно при обработке отправки форм.

Некоторые события браузера имеют действие по умолчанию. Например, нажатие на ссылку перенаправляет на новую страницу, а нажатие на кнопку отправки внутри <form> отправляет форму, что обычно приводит к перезагрузке страницы.

Чтобы продемонстрировать это, давайте обернем нашу кнопку в элемент <form>. По умолчанию нажатие на кнопку внутри формы инициирует отправку формы.

Обновите ваш файл src/App.jsx, чтобы включить тег <form>:

function App() {
  function handleClick(event) {
    console.log(event);
  }

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

export default App;

Если вы сохраните это и нажмете на кнопку сейчас, вы заметите, что страница перезагружается, и вы можете кратко увидеть вывод в консоли, прежде чем он исчезнет. Это стандартное поведение отправки формы.

Чтобы предотвратить это, вы можете вызвать event.preventDefault() внутри вашего обработчика. Этот метод сообщает браузеру не выполнять действие по умолчанию.

Измените функцию handleClick, чтобы вызвать event.preventDefault():

function App() {
  function handleClick(event) {
    event.preventDefault();
    console.log("Form submission prevented!");
  }

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

export default App;

Сохраните файл и попробуйте снова. Теперь, когда вы нажмете на кнопку на вкладке Web 8080, страница не будет перезагружаться. Вы будете последовательно видеть сообщение "Form submission prevented!" в консоли. Вы успешно взяли под контроль поведение события.

Резюме

Поздравляем с завершением лабораторной работы! Вы освоили основные концепции обработки событий в React.

В этой лабораторной работе вы практиковались в следующем:

Использование атрибута onClick в JSX для отслеживания кликов пользователя.
Определение функций-обработчиков событий внутри ваших компонентов для поддержания порядка в коде.
Корректная передача ссылки на функцию в проп обработчика событий, избегая распространенной ошибки вызова функции во время рендеринга.
Доступ к синтетическому объекту события, который предоставляет React и который содержит ценную информацию о взаимодействии пользователя.
Использование event.preventDefault() для остановки действия браузера по умолчанию, что дает вам полный контроль над пользовательским интерфейсом.

Эти навыки необходимы для создания интерактивных и динамичных пользовательских интерфейсов с помощью React. Вы можете применять те же принципы для обработки других событий, таких как onChange для полей ввода, onMouseOver для эффектов наведения курсора и многих других.