Обробка подій 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>;
};

Callback-функція, яка передається як обробник події, незалежно від її типу, гарантовано отримає один аргумент - об'єкт події браузера.

const App = () => {
	const handleClick = (evt) => {
		console.log(evt);
	};

	return (
		<>
			<button onClick={handleClick}>First button</button>
			<button onClick={evt => console.log(evt)}>Second button</button>
		</>
	);
};

Оскільки обробники подій оголошуються всередині компонента, вони мають доступ до пропсів компонента. Ось приклад компонента кнопки CustomButton, яка, коли на неї натискано, виводить alert зі значенням пропса message:

const CustomButton = ({ message, children }) => {
  return (
    <button onClick={() => alert(message)}>
      {children}
    </button>
  );
};

const App = () => {
  return (
    <>
      <CustomButton message="Playing music!">
        Play some music
      </CustomButton>
      <CustomButton message="Uploading your data!">
        Upload data
      </CustomButton>
    </>
  );
}