React Events

Подобно на HTML, React може да изпълнява действия въз основа на потребителски събития.

React има същите събития като HTML: щракване, промяна, пренасочване и т.н.


Добавяне на събития

React събитията са написани в синтаксиса camelCase:

onClick вместо onclick.

Обработващите събития на React са написани във фигурни скоби:

onClick={shoot}  вместо onClick="shoot()".

React:

Пример за изпълнение »

HTML:


Манипулатори на събития

Добра практика е да поставите манипулатора на събития като метод в класа на компонентите:

Пример:

Поставете shoot функцията вътре във Football компонента:

Пример за изпълнение »


Обвързване на this

За методи в React this ключовата дума трябва да представлява компонента, който притежава метода.

Ето защо трябва да използвате функции със стрелки. С функциите на стрелките this винаги ще представлява обекта, който е дефинирал функцията на стрелката.

Пример:

Пример за изпълнение »

Защо стрелкови функции?

В компонентите на класа this ключовата дума не е дефинирана по подразбиране, така че с обикновени функции this ключовата дума представлява обекта, който е извикал метода, който може да бъде глобалният обект на прозореца, HTML бутон или каквото и да е друго.

Прочетете повече за свързването на this в React ES6 главата.

Ако трябва да използвате обикновени функции вместо функции със стрелки, трябва да свържете this с екземпляра на компонента, използвайки bind() метода:

Пример:

Направете this достъпна във shoot функцията, като я свържете във constructor функцията:

Пример за изпълнение »

Без обвързването с this ключовата дума ще върне undefined.


Предаване на аргументи

Ако искате да изпратите параметри в манипулатор на събития, имате две възможности:

1. Направете анонимна функция със стрелка:

Пример:

Изпратете „Goal“ като параметър на shoot функцията, като използвате функцията със стрелка:

Пример за изпълнение »

Или:

2. Свържете манипулатора на събития this.

Обърнете внимание, че първият аргумент трябва да бъде this.

Пример:

Изпратете „Goal“ като параметър на shoot функцията:

Пример за изпълнение »

Забележка за втория пример: Ако изпращате аргументи, без да използвате bind метода, ( this.shoot(this, "Goal")вместо this.shoot.bind(this, "Goal")), shoot функцията ще се изпълни, когато страницата се зареди, вместо да изчака бутонът да бъде щракнат.


Реагиране на обект на събитие

Обработващите събития имат достъп до събитието React, което задейства функцията.

В нашия пример събитието е събитието „щракване“. Забележете, че отново синтаксисът е различен, когато използвате функции със стрелки или не.

С функцията със стрелка трябва да изпратите аргумента на събитието ръчно:

Пример:

Функция със стрелка: Ръчно изпращане на обекта на събитието:

Пример за изпълнение »

Без функция със стрелка, обектът на събитието React се изпраща автоматично като последен аргумент при използване на bind() метода:

Пример:

С bind() метода обектът на събитието се изпраща като последния аргумент:

Пример за изпълнение »