obrobka_podij [wiki.hostingcloud.com.ua]

Эта страница только для чтения. Вы можете посмотреть её исходный текст, но не можете его изменить. Сообщите администратору, если считаете, что это неправильно.
====== Обробка подій react ======
Щоб додати обробник подій до JSX-елементу, потрібно передати йому проп, який описує тип події. Значенням пропа повинно бути посилання на функцію зворотного виклику, яка буде викликана при настанні події. Наприклад, ось кнопка, яка наразі нічого не робить:
===== Подія в окремій функції =====

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

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

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

===== Подія в ін-лайн функції =====

Також можна визначити обробник подій безпосередньо всередині JSX як анонімну інлайн-функцію.
<code>
const App = () => {
	return <button onClick={() => alert("I'm a button!")}>Click me!</button>;
};

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

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

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

</code>
===== Читання props =====
Оскільки обробники подій оголошуються всередині компонента, вони мають доступ до пропсів компонента. Ось приклад компонента кнопки CustomButton, яка, коли на неї натискано, виводить alert зі значенням пропса message:
<code>
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>
    </>
  );
}

</code>
===== Реактивність =====
  * Локальні змінні не зберігаються між рендерами. Коли React рендерить цей компонент вдруге, він рендерить його з нуля — не враховує жодних змін у локальних змінних.
  * Зміни локальних змінних не викликають повторних рендерів. React не усвідомлює необхідності повторного рендерингу компонента з новими даними.
<code>
const App = () => {
	let clicks = 0;

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

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

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

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

<code>
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>
};

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