React предоставляет простой способ управления событиями. Приготовьтесь попрощаться с addEventListener .
В предыдущей статье о состоянии вы видели этот пример:
const CurrencySwitcher = props => {
return (
)
}Если вы уже некоторое время используете JavaScript, это похоже на обычные старые обработчики событий JavaScript, за исключением того, что на этот раз вы определяете все в JavaScript, а не в своем HTML, и передаете функцию, а не строку.
Фактические имена событий немного отличаются, потому что в React вы используете camelCase для всего, поэтому onclick становится Onclick , onsubmit становится онСубмит .
Для справки, это HTML старой школы с событиями JavaScript, смешанными в:
Обработчики событий
Принято, чтобы обработчики событий определялись как методы в классе компонентов:
class Converter extends React.Component {
handleChangeCurrency = event => {
this.setState({ currency: this.state.currency === '€' ? '$' : '€' })
}
}Все обработчики получают объект события, который в кросс-браузере соответствует спецификации событий пользовательского интерфейса W3C .
Свяжите это в методах
Не забудьте привязать методы. Методы классов ES6 по умолчанию не связаны. Это означает, что это не определено, если вы не определяете методы как функции со стрелками:
class Converter extends React.Component {
handleClick = e => {
/* ... */
}
//...
}при использовании синтаксиса инициализатора свойств с Babel (включен по умолчанию в create-react-app ), в противном случае вам необходимо связать его вручную в конструкторе:
class Converter extends React.Component {
constructor(props) {
super(props)
this.handleClick = this.handleClick.bind(this)
}
handleClick(e) {}
}Ссылка на события
Поддерживается множество событий, вот краткий список.
Буфер обмена
- Онкопия
- неразрезанный
- На пасте
Композиция
- онКомпозиционЕнд
- Начало создания композиции
- Обновление состава
Клавиатура
- онКейДаун
- Нажатие на кнопку
- онКейАп
Сосредоточить
- Сфокусироваться
- онБлур
Форма
- При обмене
- На входе
- онСубмит
Мышь
- Один клик
- Онконтекстмену
- Двойной щелчок
- онДраг
- онДрагЕнд
- онДрагЕнтер
- Ондрагексит
- Ондраглив
- онДрагОвер
- онДрагСтарт
- на капле
- На спуске
- OnMouseEnter – пользователь
- На мышеловке
- На mousemove
- На выходе
- При наведении курсора
- На подъеме
Выбор
- Выбрать
Прикосновение
- онТоучкАнцель
- нетронутый
- Онтоучмове
- На старте
пользовательский интерфейс
- Накатывать
Колесо Мыши
- На колесе
Средства массовой информации
- бортовой
- onCanПлей
- Прохождение oncanplay
- Ондурационный обмен
- не опустошенный
- незашифрованный
- На исходе
- Об ошибке
- Загруженные данные
- Загруженные данные
- Запуск загрузки
- На паузе
- В игре
- о том, как играть
- Прогресс
- onRateChange на изменение
- Увиденный
- в поисках
- установленный
- На суспензии
- Своевременное обновление
- Изменение по объему
- в ожидании
Изображение
- Загрузка
- Об ошибке
Анимация
- onAnimationСтарт
- onAnimationЕнд
- Об оживлении
Переход
- onTransitionEnd- переход
Оригинал: “https://flaviocopes.com/react-events/”