Как сделать submit формы на React?

Как сделать submit формы на React

Отправка форм - одна из базовых задач в React. Существует несколько подходов: управляемые компоненты (controlled), неуправляемые (uncontrolled) и библиотеки для работы с формами.

1. Простая управляемая форма

import {useState} from 'react';

function LoginForm() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [isLoading, setIsLoading] = useState(false);

  const handleSubmit = async (e) => {
    e.preventDefault(); // Отменяем дефолтное поведение
    setIsLoading(true);

    try {
      const response = await fetch('/api/login', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({email, password})
      });

      if (response.ok) {
        const data = await response.json();
        console.log('Login successful', data);
        setEmail('');
        setPassword('');
      } else {
        alert('Login failed');
      }
    } catch (error) {
      console.error('Error:', error);
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        placeholder="Email"
        required
      />
      <input
        type="password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
        placeholder="Password"
        required
      />
      <button type="submit" disabled={isLoading}>
        {isLoading ? 'Logging in...' : 'Login'}
      </button>
    </form>
  );
}

2. Форма с несколькими полями (оптимизированная)

function ContactForm() {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    message: ''
  });

  const handleChange = (e) => {
    const {name, value} = e.target;
    setFormData(prev => ({...prev, [name]: value}));
  };

  const handleSubmit = async (e) => {
    e.preventDefault();

    const response = await fetch('/api/contact', {
      method: 'POST',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify(formData)
    });

    if (response.ok) {
      alert('Message sent!');
      setFormData({name: '', email: '', message: ''});
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input name="name" value={formData.name} onChange={handleChange} />
      <input name="email" value={formData.email} onChange={handleChange} />
      <textarea name="message" value={formData.message} onChange={handleChange} />
      <button type="submit">Send</button>
    </form>
  );
}

3. С валидацией ошибок

function SignUpForm() {
  const [formData, setFormData] = useState({email: '', password: '', confirmPassword: ''});
  const [errors, setErrors] = useState({});

  const validateForm = () => {
    const newErrors = {};
    if (!formData.email.includes('@')) newErrors.email = 'Invalid email';
    if (formData.password.length < 8) newErrors.password = 'Min 8 characters';
    if (formData.password !== formData.confirmPassword) newErrors.confirmPassword = 'Passwords do not match';
    return newErrors;
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    const validationErrors = validateForm();

    if (Object.keys(validationErrors).length > 0) {
      setErrors(validationErrors);
      return;
    }

    const response = await fetch('/api/signup', {
      method: 'POST',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({email: formData.email, password: formData.password})
    });

    if (response.ok) console.log('Account created!');
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="email"
        value={formData.email}
        onChange={(e) => setFormData({...formData, email: e.target.value})}
      />
      {errors.email && <span className="error">{errors.email}</span>}

      <input
        type="password"
        value={formData.password}
        onChange={(e) => setFormData({...formData, password: e.target.value})}
      />
      {errors.password && <span className="error">{errors.password}</span>}

      <input
        type="password"
        value={formData.confirmPassword}
        onChange={(e) => setFormData({...formData, confirmPassword: e.target.value})}
      />
      {errors.confirmPassword && <span className="error">{errors.confirmPassword}</span>}

      <button type="submit">Sign Up</button>
    </form>
  );
}

4. Форма с checkbox и select

function SurveyForm() {
  const [formData, setFormData] = useState({
    name: '',
    country: '',
    agreeTerms: false,
    interests: []
  });

  const handleCheckbox = (e) => {
    setFormData({...formData, agreeTerms: e.target.checked});
  };

  const handleMultiSelect = (e) => {
    const {value, checked} = e.target;
    if (checked) {
      setFormData({
        ...formData,
        interests: [...formData.interests, value]
      });
    } else {
      setFormData({
        ...formData,
        interests: formData.interests.filter(i => i !== value)
      });
    }
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (!formData.agreeTerms) {
      alert('You must agree to terms');
      return;
    }
    // Submit data
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        value={formData.name}
        onChange={(e) => setFormData({...formData, name: e.target.value})}
      />
      <select
        value={formData.country}
        onChange={(e) => setFormData({...formData, country: e.target.value})}
      >
        <option value="">Select country</option>
        <option value="US">USA</option>
        <option value="RU">Russia</option>
      </select>
      <label>
        <input type="checkbox" checked={formData.agreeTerms} onChange={handleCheckbox} />
        Agree to terms
      </label>
      <button type="submit">Submit</button>
    </form>
  );
}

5. Использование React Hook Form (рекомендуется)

import {useForm} from 'react-hook-form';

function AdvancedForm() {
  const {register, handleSubmit, formState: {errors}} = useForm();

  const onSubmit = async (data) => {
    const response = await fetch('/api/data', {
      method: 'POST',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify(data)
    });
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register('email', {required: 'Email is required'})} />
      {errors.email && <span>{errors.email.message}</span>}

      <input {...register('password', {minLength: {value: 8, message: 'Min 8 chars'}})} />
      {errors.password && <span>{errors.password.message}</span>}

      <button type="submit">Submit</button>
    </form>
  );
}

Ключевые моменты

• e.preventDefault() - отменяет дефолтное поведение (перезагрузка страницы)
• Managed state - хранишь значение в state и обновляешь его
• type="submit" - кнопка отправки формы
• Валидация - проверяй данные перед отправкой
• Error handling - обрабатывай ошибки сети и валидации
• Loading state - показывай пользователю, что идёт отправка

Для сложных форм используй React Hook Form, это значительно упростит код.