React Отправка форм

Отправку формы можно контролировать, добавив обработчик событий в атрибут onSubmit элемента <form>.

Пример

Добавим кнопку отправки формы и обработчик события в атрибут onSubmit:


import { useState } from 'react';
import { createRoot } from 'react-dom/client';

function MyForm() {
  const [name, setName] = useState("");

  function handleChange(e) {
    setName(e.target.value);
  }

  function handleSubmit(e) {
    e.preventDefault(); // Предотвращаем стандартное поведение отправки формы
    alert(name); // Показываем введённое имя в алерте
  }

  return (
    <form onSubmit={handleSubmit}>
      <label>Введите ваше имя:
        <input
          type="text" 
          value={name}
          onChange={handleChange}
        />
      </label>
      <input type="submit" />
    </form>
  )
}

createRoot(document.getElementById('root')).render(
  <MyForm />
);

Пояснение к примеру:

  1. Атрибут onSubmit в элементе <form> вызывает обработчик события handleSubmit, когда пользователь нажимает кнопку отправки формы.
  2. Метод preventDefault() отключает стандартное поведение отправки формы, что предотвращает перезагрузку страницы.
  3. Функция alert(name) демонстрирует введённое значение в окне предупреждения. В реальных проектах вместо этого вы могли бы отправлять данные на сервер или проводить дальнейшую обработку.

Таким образом, используя обработчик события onSubmit, вы можете полностью контролировать поведение формы и реакцию на её отправку в приложении React.