Хотя обработка событий с помощью элементов React очень похожа на обработку событий в элементах DOM, в подходе React к изменению пользовательского интерфейса (UI) есть уникальные отличия. В React есть специальная оболочка под названием SyntheticEvent, которая является частью его системы событий. Это способствует совместимости между браузерами и упрощает работу как для разработчиков, так и для пользователей, уменьшая несоответствия между различными браузерами. Знакомые методы stopPropagation() и preventDefault(), встречающиеся в JavaScript, остаются актуальными и в системе событий React. Обработчики событий в React присоединяются к элементам с аналогичным синтаксисом, наблюдаемым при добавлении и передаче свойств через компоненты React. Способ написания обработчика заключается в использовании on в качестве префикса и в CamelCase с суффиксом имени события, как показано ниже с обработчиком события onFocus:
Обратите внимание, что в приведенном выше коде у нас есть свойство onFocus в строке 11, которому передается ссылка на функцию, а не выполнение функции onFocus. В отличие от ванильного JavaScript и HTML, которые передают обработчики событий как строки, вы передаете функцию в качестве обработчика событий с синтаксисом React JSX.
Ниже показано, как событие будет обрабатываться в элементах DOM:
<button onfocus="onFocus()">
On Focus
</button>Способ реагирования:
<button onFocus={onFocus}>
on Focus
</button>Мы не пишем onFocus(). Символ () в конце функции вызовет ее. Особое значение имеет то, что мы привязываем наши методы onFocus() и onBlur() к this с помощью функции стрелки, чтобы избежать создания новой области. Эта привязка также может быть выполнена с использованием подхода ES5, как показано ниже, но я предпочитаю использовать обновленный метод привязки ES6 со стрелочными функциями, которые позаботятся о привязке за вас. Как показано выше, сходство в синтаксисе между передачей атрибутов JSX в качестве объекта реквизита и обращением к обработчику событий очевидно.
Ниже приведен более устаревший подход ES5 к привязке this:
this.onFocus = this.onFocus.bind(this);this.onBlur = this.onBlur.bind(this);
Привязка необходима, чтобы this работало в обратном вызове. Общее правило заключается в том, что если вы ссылаетесь на метод без () после него, например onFocus={this.onFocus}, вы должны связать этот метод либо с помощью стрелочных функций (предпочтительно), либо с помощью более старой техники ES5 .bind(this) .
В документах React есть полный список поддерживаемых событий, но некоторые из наиболее распространенных включают: onKeyUp, onMouseDown, onFocus и onSubmit.
В React SyntheticEvent позволяет нам воспользоваться так называемым объединением событий, которое представляет собой метод повышения производительности нашего приложения. Объединение событий означает, что всякий раз, когда возникает событие, его данные о событии, которые являются формой объекта, отправляются в функцию обратного вызова. Затем объект немедленно очищается для последующего использования.
Подробнее об объединении событий читайте здесь: https://learn.co/tracks/full-stack-web-development-v7/react/events/events-in-detail.
Обновление состояния в React
Целью события обычно является обновление состояния. Мы не изменяем состояние напрямую, используя this.state, а вместо этого используем this.setState(), что позволяет React узнать, что в состоянии компонента произошло обновление, чтобы вызвать повторный рендеринг. Объект передается в this.setState() и объединяется с текущим состоянием. Как только состояние обновляется, для компонента запускается повторный рендеринг. Чтобы глубоко объединить текущее состояние с объектом, переданным в this.setState() , мы можем использовать оператор распространения для декомпозиции объекта. (Примечание: оператор расширения также может использоваться для массивов.) Оператор распространения — это обновленный подход ES6 к декомпозиции объекта по сравнению со старым методом ES5 с использованием Object.assign({}, obj). Я продемонстрирую это на примере ниже:
Что происходит в приведенном выше коде?
...this.state.addressInfo возвращает все ключи и значения из объекта addressInfo. Используя синтаксис распространения JavaScript, мы поддерживаем все ключи и значения, составляющие объект addressInfo, от ключа верхнего уровня street до последнего ключа country вместе со всеми связанными значениями этих ключей. Кроме того, мы добавляем ключ города с новым значением Houston. Если внутри addressInfo уже есть ключ city, он будет перезаписан новым, который мы предоставляем, в нашем случае это Houston, а если его не было, то он будет добавлен.
Подробнее: https://learn.co/tracks/full-stack-web-development-v7/react/events/updating-state
Различия между изменениями состояния и изменениями свойств
Существуют ключевые различия между изменениями в состоянии и изменениями в свойствах. Изменения в обоих одинаково вызывают повторную визуализацию компонента React, поскольку изменение означает обновление пользовательского интерфейса (пользовательского интерфейса). Компоненты могут изменять свое внутреннее состояние, поэтому изменения могут происходить только внутри. Хотя компонент может изменить свое собственное состояние, он не может изменить свои свойства. Изменения реквизита являются внешними, а не внутренними, и происходят, когда прародительский или родительский компонент изменяет значения, чтобы затем передать их дочерним компонентам. Я расскажу об этом более подробно в следующем посте в блоге.
