Обработчик onChange в React
Недавно я столкнулся с ситуацией, когда мне нужно было больше дюжины входных данных в форме. Установка отдельных обработчиков событий для всех из них привела бы к гораздо более повторяющемуся коду. Вместо этого было бы гораздо лучше иметь только один для всех типов ввода, таких как текст, радио, флажок и т. Д.
В этой статье мы увидим, как установить один обработчик событий изменения для нескольких типов ввода.
Один вход
Давайте создадим текст типа ввода и установим его с помощью обработчиков реакции.
В основном у нас есть переменная name в состоянии, которое мы устанавливаем в нашей форме.
Обработчик событий handleChange довольно прост для этого. Мы устанавливаем целевую стоимость мероприятия на нашем государственном имуществе.
Теперь у нас есть управляемый компонент, который фиксирует изменения и соответственно обновляет состояние.
Несколько входов
Давайте добавим еще один ввод в нашу форму и посмотрим, изменится ли что-то в нашем обработчике.
Если вы заметили, мы добавили свойства name к обоим входным данным, чтобы различать их в нашем обработчике. Необходимо внести небольшие изменения в нашу функцию handleChange, например:
Мы извлекаем значение из объекта события и назначаем его динамическому ключу, сгенерированному в квадратных скобках. evt.target.name здесь принимает имена входных данных, которые у нас есть в нашей форме.
Радио-кнопки
Вот форма с переключателями:
У этого есть начальное / промежуточное состояние переключения, установленное с помощью переключателей, а параметрам checked назначается значение соответствующего состояния. Обработчик события handleChange останется неизменным, как и предыдущий, и здесь ничего не изменится.
Textarea Inputs
Здесь был добавлен новый ввод textarea, и его значение привязано к свойству value. Здесь также handleChange остается неизменным, поскольку textarea функционирует точно так же, как текст типа ввода.
Выбрать вход
При выборе select текущее выбранное значение устанавливается с помощью свойства value родительского элемента select. Первоначально выбранное значение устанавливается начальным значением state.color. Свойства value дочерних элементов option - это потенциальные значения, на которые нужно изменить.
Снова произошли изменения в обработчике событий handleChange.
Флажок Входы
Флажки также имеют отмеченные свойства, как и переключатели, но их элементы управления независимы, и им присваивается отдельное имя в форме.
Теперь нам нужно внести небольшие изменения в обработчик, чтобы он соответствовал типу флажка, как показано ниже.
Поскольку флажки ведут себя как переключатели, мы проверяем, является ли тип цели события флажком, и на основе этого устанавливаем значение.
Заключение
Мы успешно создали единый обработчик для всех типов ввода. Почти все входы ведут себя одинаково, когда дело доходит до их обработчика изменений, за исключением флажка.
Вот ссылка на песочницу в целом: https://codesandbox.io/s/async-glade-x7ofl
JavaScript на простом английском языке
Понравилась эта статья? Если да, то получите больше похожего контента, подписавшись на наш канал YouTube!
