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