Различия

Показаны различия между двумя версиями страницы.

--- obrobka_podij [2024/03/11 19:30]
tro создано
+++ obrobka_podij [2024/03/19 18:34] (текущий)
tro
@@ Строка 25: / Строка 25: @@
 };
+</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>