Отримання даних з форми react

Якщо значення полів форми потрібні лише в момент її відправки, то така форма називається неконтрольованою. Доступ до значень елементів отримуємо через властивість elements, яка зберігає посилання на інтерактивні елементи форми. Варіант 1

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

Варіант 2 (правильний) Створюємо функцію що передаємо як пропс до компоненти з формою

const App = () => {

  // Колбек-функція для обробки сабміту форми
  const handleLogin = (userData) => {
    // Виконуємо необхідні операції з даними
    console.log(userData);
  };

  return (
    <div>
      <h1>Please login to your account!</h1>
      {/* Передаємо колбек як пропс форми */}
      <LoginForm onLogin={handleLogin} />
    </div>
  );
};

В компненті з формою отримуємо функцію що повинна щось зробити з данними з форми

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