React был очень веселым, но в то же время сложным в течение последних нескольких дней. События React, по-видимому, не совпадают с событиями HTML DOM. Они похожи в том смысле, что оба обрабатывают события, но мы должны быть особенно внимательны к тому, как мы пишем наш синтаксис. Это связано с тем, что React использует camelCase и не распознает onclick, onmouseover, onkeyup и т. д., существующие в HTML DOM. Синтаксис между ними немного отличается.

Чтобы использовать события React, мы должны сначала указать событие, которое мы прослушиваем, а также обработчик событий, который будет вызываться внутри нашей разметки. В JSX мы передаем функцию как обработчик событий, а не строки. Если вы еще помните, в JS для рендеринга HTML использовался синтаксис ‹button onclick="activate()"›‹/button›, а теперь в JSX это будет ‹button onClick={this.activate}›‹/button› . Обратите внимание на camelCase и {}, а не на «»! Обработчики событий вызывают функцию, отвечающую за изменение состояний, а React автоматически вызывает рендеринг.

Преимущество использования React заключается в том, что его обработчики событий никогда не привязываются напрямую к элементам DOM. Существует только один обработчик событий в корне приложения, который затем отвечает за прослушивание всех других событий и вызов других обработчиков при необходимости. Это означает, что приложение занимает меньше памяти.

Примеры событий

События onClick. Эти события работают с кнопками, тегами p и любыми другими элементами, на которые можно нажать. … onDrag, onDoubleClick и т. д. Ниже приведен пример нажатия кнопки отправки, на котором есть счетчик. Каждый раз, когда вы нажимаете на кнопку, счет увеличивается на 1.

import React from 'react'
export default class Counter extends React.Component {
   constructor() {
      super();
      this.state = {
         count: 0
      }
   }
 handleChange = (event) => {
    this.setState = ({
       count: this.state.count + 1
    })
 }
render() {
  return (
   <div>
    <button type="submit" value="Button" onClick={this.handleChange} />
   </div>
  )
 }
}

Другой пример фрагмента кода взят из одной из наших лабораторий React, где мы нажали кнопку, чтобы получить координаты клика, а цель была обозначена clientX и clientY. Затем мы визуализировали его в нашем ‹index.js›, чтобы отобразить кнопку. Внутри тега кнопки мы отображаем событие через onClick, и как только кнопка нажата, она запускает функцию «получить», которая получает координаты/местоположение мыши.

import React from 'react'
export default class CoordinatesButton extends React.Component {
get = (event) => {
  this.props.onReceiveCoordinates([event.clientX, event.clientY])
 }
render(){
  return(
  <div>
   <button onClick={this.get}/>
  </div>
 )}
};

События onChange-Применяется только к изменениям входных данных type, textarea и select. Когда вы печатаете в текстовом поле, и значения меняются. Значение состояния начинается с пустой строки, состояние изменяется по мере ввода, а значение захватывается event.target.value. В HTML значение устанавливается равным начальному значению, которое является пустой строкой, и пока мы печатаем (onChange), срабатывает функция handleInput, и значение становится тем, что мы печатаем.

import React from 'react'
export default class Form extends React.Component {
 constructor() {
  super()
this.state = {
   value: '',
  }
 }
handleInput = (event) => {
  this.setState({
   value: event.target.value,
  })
 }
render() {
  return (
   <div>
    <input type="text" value={this.state.value} onChange={this.handleInput} />
   </div>
  )
 }
}

События наведения - onMouseEnter + onMouseLeave: также события мыши, но я сделал это отдельно только потому, что это не события щелчка, а события наведения.

import React from 'react'
export default class Hover extends React.Component {
 constructor(props) {
  super(props)
  this.state = {
   box: 'out'
  }
 }
changeColor() {
  this.setState({
   box_state: 'in'
  })
 }
resetColor() {
  this.setState({
   box_state: 'out'
  })
 }
render() {
  return (
   <div style={insert box model} onMouseEnter={this.changeColor.bind(this)} onMouseLeave={this.resetColor.bind(this)}>
   </div>
  )
 }
}

С правильным стилем для блока, который я не указал во фрагменте кода, вы могли навести курсор на блок, чтобы увидеть изменение цвета! Я использовал bind здесь, потому что я не использую функцию стрелки.

Ключевые события-используются с onKeyPress={this.function}

  • altKey: логическое значение, указывает, была ли клавиша нажата другой клавишей.
  • ctrlKey: логическое значение (такое же).
  • shiftKey: логическое значение (то же самое).

Это

Вы всегда должны привязывать контекст компонента к функции, когда вам нужно получить доступ к состоянию и манипулировать им. Однако если вы используете стрелочную функцию внутри класса, вам не нужно явно привязывать контекст. Это связано «лексически» и имеет значение из исходного контекста. Значение this внутри обработчика событий всегда будет ссылаться на компонент, в котором находится обработчик событий.

Ресурсы: список событий React

https://facebook.github.io/react/docs/events.html#supported-events