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

• Локальні змінні не зберігаються між рендерами. Коли React рендерить цей компонент вдруге, він рендерить його з нуля — не враховує жодних змін у локальних змінних.
• Зміни локальних змінних не викликають повторних рендерів. React не усвідомлює необхідності повторного рендерингу компонента з новими даними.

const App = () => {
	let clicks = 0;

  const handleClick = () => {
    clicks = clicks + 1;
  };

	return <button onClick={handleClick}>Current: {clicks}</button>
};

Для оновлення компонента новими даними потрібно виконати дві речі:

• Зберегти дані між рендерами.
• Заставити React рендерити компонент з новими даними (повторний рендеринг).

import { useState } from 'react';

const App = () => {
	const [ clicks, setClicks ] = useState(0);

  const handleClick = () => {
    // clicks = clicks + 1;
		setClicks(clicks + 1);
  };

	return <button onClick={handleClick}>Current: {clicks}</button>
};

const handlesumbint=(event)=>{
 event.PreventDefault();  //Зпобігаємо перезавантаженню сторінки при подіі онСабміті
conust userEmail = event.currentTarget.elements.userMail.value;
 console.log("userEmail",userEmail);
event.currentTarget.reset() //скидуємо форму
}