Событие onChange запускается при вводе значений во входные данные. Это запускает функцию handleChange(), которая используется для установки нового состояния ввода.
1. Обработка одного входа
Во-первых, мы должны настроить поле ввода как контролируемый компонент, чтобы у нас был контролируемый компонент, который воспринимает изменения и соответствующим образом обновляет состояние.
Мы изучим функцию handleChange() с помощью проекта, в котором мы собираемся использовать функцию handleChange() для отображения введенных данных.
Создание приложения React:
Шаг 1. Создайте приложение React с помощью следующей команды:
Шаг 2. После создания папки проекта, т. е. демонстрации handlechange, перейдите к ней с помощью следующей команды:
Структура проекта: он будет выглядеть следующим образом.
App.js. Теперь запишите следующий код в файл App.js. Здесь приложение является нашим компонентом по умолчанию, в котором мы написали наш код.
JavaScript
Шаг для запуска приложения: запустите приложение с помощью следующей команды из корневого каталога проекта:
Вывод:
Следующий результат будет получен, если пользователь введет ввод, заданный с помощью функции handleChange(), как показано ниже:
2. Обработка множественного ввода
В приведенном выше проекте запишите следующий код в файл App.js для обработки нескольких входных данных.
Javascript
Шаг для запуска приложения: запустите приложение с помощью следующей команды из корневого каталога проекта:
Вывод:
Следующее будет выводом, если пользователь введет ввод, который установлен с помощью функции handleChange(), как показано ниже:
Объяснение. Мы добавили свойство имени в случае нескольких входных данных, чтобы мы могли определить, какое поле ввода вызвало handleChange()функция. Мы использовали оператор распространения, потому что при запуске функции handleChange() нам нужно текущее значение firstName и lastName (поскольку только тогда мы можем добавить (или присвоить) введенный ввод к переменным состояния (firstName и lastName)), которые хранятся в объекте состояния, поэтому мы использовали оператор распространения, чтобы взять существующий объект состояния.
Как работает это выражение [name]: value?
Этот оператор присваивает значение тому полю ввода, имя которого (Свойство) соответствует значению.
