Обробка подій react

Щоб додати обробник подій до JSX-елементу, потрібно передати йому проп, який описує тип події. Значенням пропа повинно бути посилання на функцію зворотного виклику, яка буде викликана при настанні події. Наприклад, ось кнопка, яка наразі нічого не робить:

const App = () => {
	const handleClick = () => {
		alert("I'm a button!");
	};

	return <button onClick={handleClick}>Click me!</button>;
};

1. Пропи подій визначаються в React та мають ім'я в стилі camelCase, починаючи з префікса on, після чого йде назва події. Наприклад: onClick, onSubmit, onChange, і так далі.
2. Функції обробників подій, такі як handleClick, визначаються всередині компонентів.
3. За конвенцією ім'я обробника подій починається з handle, за яким слідує назва події. Ви часто побачите щось на зразок onClick={handleClick}, onSubmit={handleSubmit}, і так далі.

Також можна визначити обробник подій безпосередньо всередині JSX як анонімну інлайн-функцію.

const App = () => {
	return <button onClick={() => alert("I'm a button!")}>Click me!</button>;
};