Формы и обработка ввода в 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. Вы можете расширить его, добавив другие типы полей, валидацию, асинхронную обработку и другие функциональности в зависимости от ваших потребностей.

Lingualeo

Полезные ссылки:

zaka-zaka

Покупай игры выгодно

РЕКЛАМА, ООО «ГЕЙБСТОР» ИНН: 7842136365

zaochnik

Срочная помощь в написании всех видов работ

РЕКЛАМА, ООО «ЗАОЧНИК.КОМ.» ИНН: 7710949967

skyeng

Лучшие из курсов английского в Skyeng

РЕКЛАМА, ОАНО ДПО «СКАЕНГ» ИНН: 9709022748