Пошук уроків, статей та іншого контенту
Як прив'язувати обробники подій у JSX, передавати їм аргументи та керувати формами.
Обробники подій передаються як props у camelCase (onClick, onChange, onSubmit) і мають отримувати посилання на функцію, а не результат її виклику. React обгортає нативні події браузера у власний об'єкт SyntheticEvent — узгоджений між браузерами API з тими самими методами, що й у нативних подій (preventDefault, stopPropagation, target тощо).
function SaveButton() {
function handleClick() {
console.log("Збережено");
}
return <button onClick={handleClick}>Зберегти</button>;
}Класична пастка: <button onClick={handleClick()}> викликає handleClick одразу під час рендеру, а в onClick потрапляє те, що handleClick() повернув (зазвичай undefined) — обробник не спрацює на клік. Потрібно передавати саму функцію: onClick={handleClick}.
Коли обробнику потрібен додатковий аргумент (наприклад, id елемента, за яким клікнули), напряму передати посилання на функцію з аргументом не вийде — вона викличеться одразу. Рішення — обгорнути виклик у стрілкову функцію:
function TodoItem({ id, text, onDelete }) {
// Стрілкова функція відкладає виклик onDelete(id) до реального кліку
return (
<li>
{text}
<button onClick={() => onDelete(id)}>Видалити</button>
</li>
);
}Для полів вводу типовий патерн — «контрольований компонент»: значення поля береться зі стану React (value), а onChange оновлює цей стан при кожній зміні. Це робить React, а не DOM, єдиним джерелом правди про поточне значення поля:
function SearchInput() {
const [query, setQuery] = useState("");
return (
<input
value={query}
onChange={(event) => setQuery(event.target.value)}
placeholder="Пошук..."
/>
);
}Стандартна поведінка браузера при відправленні <form> — перезавантажити сторінку, що майже завжди небажано в React-застосунку. Обробник onSubmit має явно викликати event.preventDefault(), щоб перехопити відправлення й обробити його на JavaScript-рівні:
function LoginForm() {
const [email, setEmail] = useState("");
function handleSubmit(event) {
event.preventDefault(); // без цього сторінка перезавантажиться
console.log("Відправлено:", email);
}
return (
<form onSubmit={handleSubmit}>
<input value={email} onChange={(e) => setEmail(e.target.value)} />
<button type="submit">Увійти</button>
</form>
);
}onClick={handleClick()} замість onClick={handleClick} — функція викликається під час рендеру, а не при кліку.
Забутий event.preventDefault() в onSubmit форми — сторінка перезавантажується, і весь стан React-застосунку губиться.
input із value зі стану, але без onChange — React видасть попередження про «read-only» поле, бо саме React, а не браузер, тепер відповідає за оновлення значення.
Обробники подій передаються як props у camelCase і мають бути посиланням на функцію, а не результатом її виклику; коли потрібно передати додатковий аргумент, обробник обгортають у стрілкову функцію. Контрольовані інпути тримають значення поля в стані React через пару value/onChange, а onSubmit форми майже завжди потребує явного event.preventDefault().