Различия

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

--- otrimannja_danix_z_formi_react [2024/03/20 18:43]
tro создано
+++ otrimannja_danix_z_formi_react [2024/03/20 18:47] (текущий)
tro
@@ Строка 2: / Строка 2: @@
 ===== Неконтрольована форма =====
 Якщо значення полів форми потрібні лише в момент її відправки, то така форма називається неконтрольованою. Доступ до значень елементів отримуємо через властивість elements, яка зберігає посилання на інтерактивні елементи форми.
+**Варіант 1**
 <code>
 const LoginForm = () => {
@@ Строка 19: / Строка 20: @@
 		// Скидаємо значення полів після відправки
 		form.reset();
+  };
+  return (
+    <form onSubmit={handleSubmit}>
+      <input type="text" name="login" />
+      <input type="password" name="password" />
+      <button type="submit">Login</button>
+    </form>
+  );
+};
+</code>
+**Варіант 2 (правильний)**
+Створюємо функцію що передаємо як пропс до компоненти з формою
+<code>
+const App = () => {
+  // Колбек-функція для обробки сабміту форми
+  const handleLogin = (userData) => {
+    // Виконуємо необхідні операції з даними
+    console.log(userData);
+  };
+  return (
+    <div>
+      <h1>Please login to your account!</h1>
+      {/* Передаємо колбек як пропс форми */}
+      <LoginForm onLogin={handleLogin} />
+    </div>
+  );
+};
+</code>
+В компненті з формою отримуємо функцію що повинна щось зробити з данними з форми
+<code>
+const LoginForm = ({ onLogin }) => {
+  const handleSubmit = (evt) => {
+    evt.preventDefault();
+    const form = evt.target;
+    const { login, password } = form.elements;
+    // Викликаємо пропс onLogin
+    onLogin({
+      login: login.value,
+      password: password.value,
+    });
+    form.reset();
   };