Отримання даних з форми 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>
);
};