Пошук уроків, статей та іншого контенту
Навчимося обробляти click, input та інші події, передавати обробники й використовувати об’єкт події.
Подія — це дія користувача або браузера:
натискання кнопки;
введення тексту;
надсилання форми;
наведення курсора;
натискання клавіші.
У React обробники подій передаються як властивості JSX. Назви таких властивостей записуються в camelCase:
onClick;
onChange;
onSubmit;
onMouseEnter;
onKeyDown.
На відміну від HTML, у JSX обробник передається у фігурних дужках:
<button onClick={handleClick}>Натиснути</button>Спочатку створимо функцію-обробник, а потім передамо її до onClick:
function App() {
function handleClick() {
console.log('Кнопку натиснуто');
}
return (
<button onClick={handleClick}>
Натиснути
</button>
);
}Коли користувач натисне кнопку, React викличе функцію handleClick.
Обробник потрібно передавати без дужок:
<button onClick={handleClick}>Правильно</button>Якщо написати дужки, функція виконається одразу під час побудови інтерфейсу:
<button onClick={handleClick()}>Неправильно</button>У такому випадку результат виклику handleClick() буде передано як обробник, а не сама функція.
Найчастіше обробник події змінює стан компонента. Для цього використовується useState:
import { useState } from 'react';
function App() {
const [count, setCount] = useState(0);
function handleClick() {
setCount(count + 1);
}
return (
<main>
<p>Натискань: {count}</p>
<button onClick={handleClick}>
Додати
</button>
</main>
);
}
export default App;Після кожного натискання React оновлює стан і повторно відображає компонент із новим значенням.
Якщо новий стан залежить від попереднього, безпечніше використовувати функціональну форму оновлення:
function handleClick() {
setCount((currentCount) => currentCount + 1);
}currentCount — це актуальне попереднє значення стану.
Для текстового поля використовується подія onChange. Вона виникає щоразу, коли значення поля змінюється.
import { useState } from 'react';
function App() {
const [name, setName] = useState('');
function handleChange(event) {
setName(event.target.value);
}
return (
<main>
<label>
Ім’я:
<input
type="text"
value={name}
onChange={handleChange}
/>
</label>
<p>Ви ввели: {name}</p>
</main>
);
}
export default App;Тут поле є керованим:
value={name} визначає значення поля зі стану;
onChange={handleChange} реагує на введення;
event.target.value містить новий текст;
setName оновлює стан.
Після зміни стану React знову відображає поле з актуальним значенням.
Невелику функцію можна записати без окремого оголошення:
function App() {
const [text, setText] = useState('');
return (
<input
value={text}
onChange={(event) => setText(event.target.value)}
/>
);
}Окрема функція часто зручніша, якщо обробка містить кілька дій або використовується в іншому місці компонента.
React передає обробнику об’єкт події. У ньому міститься інформація про дію користувача.
function handleClick(event) {
console.log(event);
}Властивості, які використовуються найчастіше:
event.target — елемент, на якому відбулася подія;
event.currentTarget — елемент, на якому встановлено поточний обробник;
event.target.value — значення поля введення;
event.target.checked — стан прапорця;
event.key — натиснута клавіша;
event.type — тип події.
Наприклад, можна отримати назву кнопки:
function handleClick(event) {
console.log(event.currentTarget.textContent);
}
function App() {
return (
<button onClick={handleClick}>
Зберегти
</button>
);
}Зазвичай для полів введення використовують event.target.value:
function handleChange(event) {
console.log(event.target.value);
}Обробник можна передати дочірньому компоненту через props.
function ActionButton({ onAction }) {
return (
<button onClick={onAction}>
Виконати дію
</button>
);
}
function App() {
function handleAction() {
console.log('Дію виконано');
}
return <ActionButton onAction={handleAction} />;
}
export default App;У цьому прикладі:
App створює функцію handleAction;
передає її як властивість onAction;
ActionButton отримує функцію через props;
кнопка викликає функцію під час натискання.
Назва пропу може бути довільною. Наприклад, onAction, onSelect або onSave. Префікс on допомагає зрозуміти, що проп містить обробник події.
Іноді обробнику потрібно передати не лише об’єкт події, а й додаткове значення. Для цього використовують стрілочну функцію:
function ProductButton({ productId, onSelect }) {
return (
<button onClick={() => onSelect(productId)}>
Вибрати товар
</button>
);
}
function App() {
function handleSelect(productId) {
console.log(`Вибрано товар: ${productId}`);
}
return (
<ProductButton
productId={42}
onSelect={handleSelect}
/>
);
}
export default App;Запис onClick={() => onSelect(productId)} означає: під час натискання викликати onSelect і передати їй productId.
Для обробки надсилання форми використовується onSubmit. Щоб браузер не перезавантажував сторінку, потрібно викликати event.preventDefault().
import { useState } from 'react';
function App() {
const [email, setEmail] = useState('');
const [message, setMessage] = useState('');
function handleSubmit(event) {
event.preventDefault();
setMessage(`Форму надіслано для адреси: ${email}`);
}
return (
<main>
<form onSubmit={handleSubmit}>
<label>
Електронна пошта:
<input
type="email"
value={email}
onChange={(event) => setEmail(event.target.value)}
/>
</label>
<button type="submit">
Надіслати
</button>
</form>
{message && <p>{message}</p>}
</main>
);
}
export default App;event.preventDefault() скасовує стандартну дію браузера. У випадку форми це стандартне перезавантаження сторінки після надсилання.
React підтримує багато подій. Наприклад:
function App() {
function handleKeyDown(event) {
if (event.key === 'Enter') {
console.log('Натиснуто Enter');
}
}
function handleMouseEnter() {
console.log('Курсор наведено');
}
return (
<main>
<input
type="text"
onKeyDown={handleKeyDown}
placeholder="Натисніть Enter"
/>
<p onMouseEnter={handleMouseEnter}>
Наведіть курсор на цей текст
</p>
</main>
);
}
export default App;Поширені події:
onClick — натискання;
onDoubleClick — подвійне натискання;
onChange — зміна значення поля;
onSubmit — надсилання форми;
onKeyDown — натискання клавіші;
onKeyUp — відпускання клавіші;
onFocus — отримання фокуса;
onBlur — втрата фокуса;
onMouseEnter — наведення курсора;
onMouseLeave — вихід курсора.
Назва події в JSX має точно відповідати назві, яку підтримує React. Наприклад, потрібно писати onClick, а не onclick.
У наступному прикладі поєднано обробку кліку, введення, прапорця та надсилання форми:
import { useState } from 'react';
function App() {
const [name, setName] = useState('');
const [isSubscribed, setIsSubscribed] = useState(false);
const [submittedName, setSubmittedName] = useState('');
function handleSubmit(event) {
event.preventDefault();
setSubmittedName(name);
}
function handleReset() {
setName('');
setIsSubscribed(false);
setSubmittedName('');
}
return (
<main>
<h1>Підписка на новини</h1>
<form onSubmit={handleSubmit}>
<label>
Ім’я:
<input
type="text"
value={name}
onChange={(event) => setName(event.target.value)}
/>
</label>
<label>
<input
type="checkbox"
checked={isSubscribed}
onChange={(event) => setIsSubscribed(event.target.checked)}
/>
Підписатися на новини
</label>
<button type="submit">
Надіслати
</button>
<button type="button" onClick={handleReset}>
Очистити
</button>
</form>
{submittedName && (
<p>
Дякуємо, {submittedName}!
</p>
)}
</main>
);
}
export default App;Для прапорця використовується не value, а:
event.target.checkedЦя властивість має логічне значення true або false.
<button onClick={handleClick()}>
Натиснути
</button>Правильно:
<button onClick={handleClick}>
Натиснути
</button><button onclick={handleClick}>Натиснути</button>Правильно:
<button onClick={handleClick}>Натиснути</button>preventDefaultЯкщо форма не має виконувати стандартне перезавантаження сторінки, у onSubmit потрібно викликати:
event.preventDefault();Для checkbox потрібно використовувати checked і event.target.checked:
<input
type="checkbox"
checked={isChecked}
onChange={(event) => setIsChecked(event.target.checked)}
/>Для текстового input нове значення знаходиться в event.target.value:
function handleChange(event) {
setText(event.target.value);
}React передає обробникам об’єкт події, який має звичні властивості та методи браузерної події, зокрема:
target;
currentTarget;
value;
key;
preventDefault().
Тому обробка подій у React виглядає подібно до роботи з подіями браузера, але назви обробників у JSX записуються в camelCase.
Обробники подій у JSX записуються в camelCase: onClick, onChange, onSubmit.
Функцію-обробник потрібно передавати без виклику: onClick={handleClick}.
Об’єкт події передається обробнику автоматично.
Значення текстового поля отримують через event.target.value.
Стан прапорця отримують через event.target.checked.
Для форм використовують onSubmit і за потреби event.preventDefault().
Обробники можна передавати дочірнім компонентам через props.
Якщо потрібно передати додаткові дані, використовують стрілочну функцію.