Различия

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

--- obrobka_podij [2024/03/11 19:34]
tro
+++ obrobka_podij [2024/03/19 18:34] (текущий)
tro
@@ Строка 69: / Строка 69: @@
 </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>