React предоставляет мощную модель для обработки входных данных формы и управления поведением формы с помощью ее состояния. В этом посте я проведу вас через создание контролируемой формы в React с использованием функциональных компонентов и хуков.
Шаг 1: Создайте новый функциональный компонент React
Наш первый шаг — создать новый функциональный компонент React. Этот компонент будет содержать нашу форму.
Шаг 2: Инициализируйте состояние с помощью хука useState
Внутри нашего компонента мы инициализируем наше состояние с помощью хука useState.
Здесь inputValue — это переменная состояния, представляющая значение введенного текста в нашей форме. Функция setInputValue — это то, что мы будем использовать для обновления этого состояния.
Шаг 3: Создайте поле ввода и форму
Далее мы создадим поле ввода и форму внутри нашего компонента. Значение поля ввода контролируется состоянием inputValue. Всякий раз, когда значение изменяется (т. е. когда пользователь вводит текст в поле ввода), вызывается функция handleInputChange.
В функции handleInputChange event.target.value — это текущий текст в поле ввода. Когда пользователь вводит текст в поле ввода, 'setInputValue' обновляет состояние текущим текстом.
Функция handleSubmit выполняется при отправке формы. Сначала он вызывает event.preventDefault, чтобы форма не выполняла стандартное действие отправки формы, то есть обновление страницы. Затем он записывает текущий текст в поле ввода в консоль.
Форма имеет реквизит onSubmit, который вызывает функцию handleSubmit при отправке формы (т. е. при нажатии кнопки отправки).
Это создает контролируемую форму, потому что состояние формы (текст в поле ввода) сохраняется в состоянии React и обновляется React, а не DOM или самим полем ввода. Это дает вам больше контроля над формой и ее состоянием.
