В React события — это действия, которые происходят внутри приложения, например, нажатие кнопки, ввод текста в поле или движение мыши. React предоставляет эффективный механизм обработки таких действий с помощью своей системы событий. Обработчики событий, такие как onClick, onChange и onSubmit, используются для захвата и реагирования на эти события.
Синтаксис
<element onEvent={handlerFunction} />- element: JSX-элемент, на котором происходит событие (например,
<button>,<input>и т.д.). - onEvent: имя события в camelCase (например, onClick, onChange).
- handlerFunction: функция, которая обрабатывает событие при его возникновении.
Рассмотрим пример
/*App.css*/
.App {
text-align: center;
margin-top: 50px;
font-family: Arial, sans-serif;
}
h1 {
color: #4CAF50;
font-size: 2.5rem;
margin-bottom: 20px;
}
h2 {
font-size: 1.5rem;
color: #333;
}
.input-field {
padding: 10px;
font-size: 16px;
width: 250px;
margin: 20px 0;
border: 2px solid #ddd;
border-radius: 5px;
outline: none;
transition: border 0.3s ease;
}
.input-field:focus {
border-color: #4CAF50;
}
.save-button {
padding: 10px 20px;
font-size: 16px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.save-button:hover {
background-color: #45a049;
}
.save-button:active {
background-color: #388e3c;
}
// App.js
import "./App.css";
import { useState } from "react";
function App() {
const [inp, setINP] = useState("");
const [name, setName] = useState("");
const clk = () => {
setName(inp); // Устанавливаем значение name из поля ввода
setINP(""); // Очищаем поле ввода
};
return (
<div className="App">
<h1>GeeksforGeeks</h1>
{name ? <h2>Your Name: {name}</h2> : null}
<input
type="text"
placeholder="Enter your name..."
onChange={(e) => setINP(e.target.value)} // Обновляем состояние inp при вводе
value={inp} // Значение поля ввода контролируется состоянием inp
/>
<button onClick={clk}>Save</button>
</div>
);
}
export default App;
Вывод
- Компонент использует useState для управления двумя состояниями:
inp— значение поля ввода, иname— имя пользователя после сохранения. - Значение поля ввода контролируется состоянием
inp. При вводе срабатывает событие onChange, обновляющееinp. - Нажатие кнопки «Save» устанавливает
nameравным текущему значениюinpи очищает поле ввода. - Если
nameустановлено, отображается сообщение с именем пользователя; иначе показываются только поле ввода и кнопка.
Распространённо используемые обработчики событий в React
React предоставляет набор встроенных обработчиков событий для работы с разными взаимодействиями пользователя:
| React событие | Описание |
|---|---|
| onClick | Обрабатывает клики мыши по элементу интерфейса. |
| onChange | Отслеживает изменение значения в полях ввода. |
| onSubmit | Срабатывает при отправке формы, часто используется для предотвращения стандартного поведения формы. |
| onKeyDown | Отслеживает нажатие клавиши на клавиатуре. |
| onKeyUp | Отслеживает отпускание клавиши на клавиатуре. |
| onMouseEnter | Срабатывает, когда курсор мыши входит в границы элемента. |
Обработка событий в React
1. Добавление обработчиков событий
В React обработчики событий добавляются напрямую на элементы через JSX-атрибуты. Примеры отличаются от обычного HTML тем, что используются имена событий в camelCase, а не в нижнем регистре.
import React, { Component } from 'react';
class App extends Component {
constructor(props) {
super(props);
this.state = {
message: 'Hello, welcome to React!',
};
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState({
message: 'You clicked the button!',
});
}
render() {
return (
<div>
<h1>{this.state.message}</h1>
{/* Добавляем обработчик события на кнопку */}
<button onClick={this.handleClick}>Click Me</button>
</div>
);
}
}
export default App;
2. Чтение props в обработчиках событий
Иногда необходимо получить доступ к пропсам (props), переданным из родительского компонента, внутри обработчика события дочернего компонента.
/* App.css */
body {
margin: 0;
padding: 0;
display: flex;
align-items: flex-start;
height: 100vh;
background-color: #f0f0f0;
}
.parent-container {
text-align: center;
}
.child-container {
display: inline-block;
margin-top: 20px;
padding: 20px;
background-color: #fff;
border: 1px solid #ddd;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
button {
padding: 10px 20px;
background-color: #007BFF;
color: white;
border: none;
cursor: pointer;
font-size: 16px;
}
button:hover {
background-color: #0056b3;
}
// App.js
import React, { Component } from 'react';
import Child from './Child';
import './App.css';
class Parent extends Component {
render() {
return (
<div className="parent-container">
<h1>Parent Component</h1>
<Child greeting="Hello from Parent!" /> {/* Передаём проп greeting */}
</div>
);
}
}
export default Parent;
// Child.js
import React, { Component } from 'react';
class Child extends Component {
handleClick = () => {
alert(this.props.greeting); // Используем проп greeting внутри обработчика
};
render() {
return (
<div className="child-container">
<h2>Child Component</h2>
<button onClick={this.handleClick}>Click to See Greeting</button>
</div>
);
}
}
export default Child;
3. Передача обработчиков событий как props
Обработчики событий можно передавать в дочерние компоненты через пропсы, чтобы организовать обратную связь и позволить дочерним компонентам запускать действия в родительских.
// App.js
import React, { Component } from 'react';
import Child from './Child';
class Parent extends Component {
handleClick = () => {
alert("Button clicked in Child component!"); // Действие для события
};
render() {
const containerStyle = {
display: "flex",
justifyContent: "center",
alignItems: "flex-start",
height: "100vh",
margin: "0",
};
return (
<div style={containerStyle}>
<div>
<h1>Parent Component</h1>
{/* Передаём обработчик как проп */}
<Child onClickHandler={this.handleClick} />
</div>
</div>
);
}
}
export default Parent;
// Child.js
import React from 'react';
function Child({ onClickHandler }) {
const buttonStyle = {
padding: "12px 24px",
fontSize: "16px",
color: "white",
backgroundColor: "#007bff",
border: "none",
borderRadius: "4px",
cursor: "pointer",
transition: "background-color 0.3s",
};
const buttonHoverStyle = {
backgroundColor: "#0056b3",
};
return (
<div>
<h2>Child Component</h2>
{/* Кнопка вызывает обработчик из пропсов */}
<button
onClick={onClickHandler}
style={buttonStyle}
onMouseOver={(e) => (e.target.style.backgroundColor = buttonHoverStyle.backgroundColor)}
onMouseOut={(e) => (e.target.style.backgroundColor = "#007bff")}
>
Click Me!
</button>
</div>
);
}
export default Child;
4. Именование props для обработчиков событий
Принято давать обработчикам событий имена, отражающие событие, которое они обрабатывают. Это улучшает читаемость и поддерживаемость кода.
import React from "react";
function Button({ onClickHandler }) {
return <button onClick={onClickHandler}>Click Me</button>;
}
function Parent() {
const handleClick = () => {
alert("Button clicked!");
};
return <Button onClickHandler={handleClick} />;
}
export default Parent;
Распространение событий (Event Propagation) в React
В React распространение события (event propagation) означает процесс передачи события от элемента-источника (где оно произошло) ко всем его предкам в DOM-дереве. По умолчанию React использует фазу всплытия (bubbling), то есть событие передаётся снизу вверх (от целевого элемента к родителям), если не остановить этот процесс явно.
import React from "react";
function Child() {
const handleClick = (event) => {
event.stopPropagation(); // Прекращаем дальнейшее всплытие события
alert("Child button clicked");
};
return <button onClick={handleClick}>Child Button</button>;
}
function Parent() {
const handleClick = () => {
alert("Parent div clicked");
};
return (
<div
onClick={handleClick}
style={{ padding: "50px", backgroundColor: "lightgray" }}
>
<Child />
</div>
);
}
export default Parent;
Предотвращение стандартного поведения событий в React
Метод event.preventDefault() используется для отмены стандартного поведения браузера. Это полезно, если необходимо реализовать кастомную логику при обработке событий, например, при отправке формы.
import React, { useState } from "react";
function SimpleForm() {
const [name, setName] = useState("");
const handleSubmit = (event) => {
event.preventDefault(); // Отменяем стандартное поведение формы (перезагрузку страницы)
alert(`Form submitted with name: ${name}`);
};
const styles = {
container: {
display: "flex",
justifyContent: "center",
alignItems: "flex-start", // Выравнить элементы по верхнему краю
height: "100vh", // Полная высота окна просмотра
backgroundColor: "#f0f0f0",
paddingTop: "50px", // Отступ сверху для центрирования
},
form: {
textAlign: "center",
padding: "20px",
backgroundColor: "white",
borderRadius: "5px",
boxShadow: "0 4px 8px rgba(0, 0, 0, 0.1)",
},
input: {
padding: "10px",
fontSize: "16px",
marginBottom: "10px",
borderRadius: "4px",
border: "1px solid #ccc",
width: "200px",
},
button: {
padding: "10px 20px",
fontSize: "16px",
borderRadius: "4px",
border: "1px solid #ccc",
backgroundColor: "#4CAF50",
color: "white",
cursor: "pointer",
marginTop: "20px",
},
};
return (
<div style={styles.container}>
<form onSubmit={handleSubmit} style={styles.form}>
<input
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
placeholder="Enter your name"
style={styles.input}
/>
<button type="submit" style={styles.button}>
Submit
</button>
</form>
</div>
);
}
export default SimpleForm;
Различия между HTML DOM и React DOM
| Особенность | HTML DOM | React DOM |
|---|---|---|
| Природа | Представляет структуру HTML-документа. | Представляет виртуальное отображение пользовательского интерфейса. |
| Обновления | Обновляет реальный DOM напрямую после каждого изменения. | Сначала обновляет виртуальный DOM, затем выборочно обновляет реальный DOM. |
| Производительность | Могут возникать проблемы с производительностью из-за частых прямых обновлений. | Оптимизировано за счёт виртуального DOM и эффективного сравнения версий. |
| Обработка событий | Требует полной перерисовки страницы или элемента. | События привязаны к виртуальному DOM и обрабатываются синтетической системой событий React. |
| Связывание данных | События напрямую связаны с DOM-элементами. | Управление данными происходит через state и props компонентов. |
| Представление DOM | DOM — это древовидная структура, где каждый элемент — узел. | React DOM использует виртуальный DOM — лёгкую копию реального DOM для эффективных обновлений. |
🔑 Ключевые моменты:
- В React события обрабатываются через специальные обработчики (onClick, onChange и др.), которые добавляются как атрибуты JSX.
- Состояние компонентов (useState или this.state) используется для управления динамическими данными и взаимодействием с пользователем.
- Обработчики событий можно передавать как props дочерним компонентам для обеспечения связи и обратной связи.
- React использует фазу всплытия для распространения событий, что можно контролировать с помощью event.stopPropagation().
- Метод event.preventDefault() позволяет отменять стандартное поведение браузера, например, перезагрузку страницы при отправке формы.
- React DOM оптимизирует работу с документом благодаря виртуальному DOM, что обеспечивает лучшую производительность по сравнению с обычным HTML DOM.
