Формы и обработка ввода в React

Формы и обработка ввода в React позволяют создавать интерактивные пользовательские интерфейсы для сбора и обработки данных от пользователя. Вот пример простой формы и обработки введенных данных.

Создание формы:

import React, { useState } from 'react';

function FormExample() {
  const [inputValue, setInputValue] = useState('');

  const handleInputChange = (e) => {
    setInputValue(e.target.value);
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    alert(`Submitted value: ${inputValue}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Enter text:
        <input type="text" value={inputValue} onChange={handleInputChange} />
      </label>
      <button type="submit">Submit</button>
    </form>
  );
}

В этом примере компонент FormExample содержит текстовое поле (<input type="text" />), кнопку (<button>), и метку (<label>). Состояние inputValue отслеживает значение введенного текста.

Обработка введенных данных:

• onChange для отслеживания изменений в текстовом поле:

const handleInputChange = (e) => {
  setInputValue(e.target.value);
};

• Функция handleInputChange вызывается каждый раз, когда пользователь вводит текст в поле. Она обновляет состояние inputValue с текущим значением текстового поля.

• onSubmit для обработки отправки формы:

const handleSubmit = (e) => {
  e.preventDefault();
  alert(`Submitted value: ${inputValue}`);
};

• Функция handleSubmit вызывается при отправке формы. Мы используем e.preventDefault() для предотвращения перезагрузки страницы при отправке формы, а затем выводим значение inputValue с помощью alert.

Этот пример демонстрирует базовый способ создания формы и обработки введенных данных в React. Вы можете расширить его, добавив другие типы полей, валидацию, асинхронную обработку и другие функциональности в зависимости от ваших потребностей.