ReactJS - Управление событиями

Здравствуйте, будущие разработчики React! Сегодня мы погружаемся в захватывающий мир управления событиями в ReactJS. Как ваш доброжелательный сосед по компьютерным наукам, я рад помочь вам в этом путешествии. Не волнуйтесь, если вы новички в программировании — мы начнем с азов и постепенно поднимемсяżej. Так что возьмите杯 кофе (или чая, если это ваш выбор) и давайте начнем!

Управление событиями в ReactJS

События — это жизнь интерактивных веб-приложений. Они resemble кнопки и рычаги в кабине космического корабля — они заставляют вещи происходить! В ReactJS управление событиями — это то, как мы обрабатываем взаимодействия пользователей, такие как клики, нажатия клавиш и отправки форм.

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

Синтетические события React

Прежде чем мы углубимся в код, давайте поговорим о чем-то уникальном для React: Синтетические событя. Это способ React обеспечить единообразие работы событей в разных браузерах. Это�� как универcальный переводчик для вашего приложения!

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

Добавление событья

Давайте начнем с простого примера. Мы создадим кнопку, которая при нажатии будет отображать сообщение об ошибке.

function AlertButton() {
return (
<button onClick={() => alert('You clicked me!')}>
Click me!
</button>
);
}

В этом примере:

• Мы определяем функциональный компонент AlertButton.
• Внутри компонента мы возвращаем элемент <button>.
• Мы добавляем атрибут onClick к кнопке. Это как мы присоединяем listener событей в React.
• Атрибут onClick устанавливается в стрелочную функцию, которая вызывает alert() с нашим сообщением.

Когда вы отрендерите этот компонент и нажмете на кнопку, вы увидите сообщение об ошибке, говорящее "You clicked me!".

Обработка событья

Теперь давайте сделаем вещи немного интереснее. Вместо того чтобы просто отображать сообщение об ошибке, мы обновим состояние компонента при нажатии на кнопку.

import React, { useState } from 'react';

function ClickCounter() {
const [count, setCount] = useState(0);

const handleClick = () => {
setCount(count + 1);
};

return (
<div>
<p>You've clicked {count} times</p>
<button onClick={handleClick}>
Click me!
</button>
</div>
);
}

Давайте разберем это:

1. Мы импортируем useState из React для управления состоянием нашего компонента.
2. Мы определяем функциональный компонент ClickCounter.
3. Внутри компонента мы используем useState(0) для создания переменной состояния count,�始化ированной в 0, и функции setCount для ее обновления.
4. Мы определяем функцию handleClick, которая вызывает setCount для инкрементации счета.
5. В нашем JSX мы отображаем текущий счет и кнопку.
6. Атрибут onClick кнопки устанавливается в нашу функцию handleClick.

Каждый раз, когда вы нажимаете кнопку, счет будет увеличиваться на 1!

Передача аргументов в обработчик событья

Иногда вам может понадобиться передать дополнительную информацию в ваш обработчик событья. Давайте рассмотрим пример, где у нас есть несколько кнопок, каждая из которых связана с разным fruitом.

import React, { useState } from 'react';

function FruitPicker() {
const [selectedFruit, setSelectedFruit] = useState('');

const handleFruitClick = (fruit) => {
setSelectedFruit(fruit);
};

return (
<div>
<h2>Pick a fruit:</h2>
<button onClick={() => handleFruitClick('Apple')}>Apple</button>
<button onClick={() => handleFruitClick('Banana')}>Banana</button>
<button onClick={() => handleFruitClick('Cherry')}>Cherry</button>
<p>You selected: {selectedFruit}</p>
</div>
);
}

В этом примере:

1. Мы создаем переменную состояния selectedFruit для отслеживания выбранного фрукта.
2. Наша функция handleFruitClick принимает параметр fruit.
3. В каждом атрибуте onClick кнопки мы используем стрелочную функцию для вызова handleFruitClick с соответствующим названием фрукта.

Когда вы нажимаете на кнопку, она обновляет состояние selectedFruit с названием фрукта, на который вы нажали.

Общие событья React

Вот таблица некоторых общих событей React, которые вы можете использовать:

Название событья	Описание
onClick	Вызывается при нажатии на элемент
onChange	Вызывается при изменении значения элемента ввода
onSubmit	Вызывается при отправке формы
onMouseEnter	Вызывается при въезде мыши в элемент
onMouseLeave	Вызывается при выходе мыши из элемента
onKeyDown	Вызывается при нажатии клавиши
onKeyUp	Вызывается при отпускании клавиши
onFocus	Вызывается при получении элементом фокуса
onBlur	Вызывается при потере элементом фокуса

Помните, что эти событья в React записываются с использованием camelCase, в отличие от их строчных HTML аналогов.

И вот вы, ребята! Вы только что сделали свои первые шаги в мир управления событьями в React. Практикуйтесь с этими примерами,try combine different concepts, и вскоре вы будете создавать интерактивные приложения React, как профессионал!

Помните, в программировании, как и в жизни, ключ — это продолжать экспериментировать и учиться. Не бойтесь делать ошибки — они всего лишь ступени к успеху. Счастливого кодирования, и пусть React будет с вами!

Credits: Image by storyset