В этом примере мы увидим пример события ReactJS onClick. Мы найдем способы обработки события click элементов HTML с помощью ReactJS. Как вы знаете, ReactJS выросла в популярности. И стала одной из самых популярных библиотек для разработки интерфейса. Мы исследуем, как прикреплять обработчики событий и обрабатывать события нажатия различных HTML-элементов. В процессе работы мы исследуем различные нюансы вокруг него.
Итак, давайте начнем и создадим простое приложение, чтобы продемонстрировать, как обрабатывать событие нажатия.
1. Инструменты и рамки
Мы используем следующий набор инструментов и интегрированные среды для создания простого приложения ReactJS для этого примера.
create-реагировать-приложение представляет собой пакет для быстрой генерации приложения ReactJS. Кроме того, он использует последнюю версию ReactJS. Кроме того, я использовал мой любимый редактор Visual Studio Code, хотя вы можете выбрать один из ваших вариантов.
2. Создание приложения ReactJS
Мы запускаем следующую команду, чтобы сгенерировать наше стартовое приложение.
|
1
|
> npx create-react-app my-app |
npx поставляется с Nodejs и в основном загружает временную копию пакетов и выполняет их с предоставленными параметрами. Это предотвращает загрязнение глобального пространства имен редко используемыми пакетами. Как только приведенная выше команда завершится, мы должны иметь структуру проекта, которая выглядит следующим образом:
3. Обработка событий
Давайте создадим простой компонент с парой тегов HTML. Мы будем использовать этот компонент, чтобы узнать, как обрабатывать событие нажатия. Компонент отображает кнопку и метку привязки. Мы обработаем событие click обоих этих тегов. Для обработки события click тега HTML мы передаем метод обработчика события свойству onClick тега, как показано ниже:
|
1
2
3
4
|
...<a href="#" onClick={handleLinkClick}>Click Me!</a><button onClick={handleButtonClick}>Click Me!</button>... |
Код для нашего компонента выглядит следующим образом:
ClickDemo.js
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
import React from 'react';function ClickDemo(props) { const handleLinkClick = (event) => { event.preventDefault(); alert('Link Clicked!'); } const handleButtonClick = ({ target }) => { target.innerText = "Clicked"; alert('Button Clicked!'); } return <> <div style={{ flexDirection: 'column', height: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center' }}> <a onClick={handleLinkClick} <button onClick={handleButtonClick}>Click Me!</button> </div> </>;}export default ClickDemo; |
Как вы можете видеть в коде выше. Мы запрещаем переход по умолчанию на http://google.com по щелчку тега привязки. Также мы показываем оповещение с сообщением Ссылка нажата !. Аналогичным образом, при нажатии кнопки мы изменяем текст кнопки на «нажатие», за исключением отображения окна предупреждения.
4. Запуск приложения
Мы запускаем приложение, используя следующую команду:
|
1
|
>npm start |
Эта команда открывает браузер и отображает наш компонент, как показано ниже:
