otrimannja_danix_z_formi_react [wiki.hostingcloud.com.ua]

Эта страница только для чтения. Вы можете посмотреть её исходный текст, но не можете его изменить. Сообщите администратору, если считаете, что это неправильно.

====== Отримання даних з форми react ======
===== Неконтрольована форма =====
Якщо значення полів форми потрібні лише в момент її відправки, то така форма називається неконтрольованою. Доступ до значень елементів отримуємо через властивість elements, яка зберігає посилання на інтерактивні елементи форми.
**Варіант 1**
<code>
const LoginForm = () => {

  const handleSubmit = (evt) => {
    evt.preventDefault();

    const form = evt.target;
    const { login, password } = form.elements;

		// Посилання на DOM-елементи
    console.log(login, password);

		// Значення полів
		console.log(login.value, password.value)

		// Скидаємо значення полів після відправки
		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();
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="login" />
      <input type="password" name="password" />
      <button type="submit">Login</button>
    </form>
  );
};

</code>