Обработка событий

Обработка событий с элементами React очень похожа на обработку событий в элементах DOM. Есть некоторые синтаксические различия:

• События React называются с использованием camelCase, а не в нижнем регистре.
• С JSX вы передаете функцию как обработчик события, а не строку.

Например, HTML:

<button onclick="activateLasers()">
  Activate Lasers
</button>

немного отличается в React:

<button onClick={activateLasers}>
  Activate Lasers
</button>

Другое отличие состоит в том, что вы не можете вернуть false, чтобы предотвратить поведение по умолчанию в React. Вы должны вызывать warnDefault явно. Например, в обычном HTML, чтобы предотвратить поведение ссылок по умолчанию при открытии новой страницы, вы можете написать:

<a href="#" onclick="console.log('The link was clicked.'); return false">
  Click me
</a>

В React это может быть:

function ActionLink() {
  function handleClick(e) {
    e.preventDefault();
    console.log('The link was clicked.');
  }
  return (
    <a href="#" onClick={handleClick}>
      Click me
    </a>
  );
}

Здесь е - синтетическое событие. React определяет эти синтетические события в соответствии со спецификацией W3C, поэтому вам не нужно беспокоиться о кросс-браузерной совместимости.

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

Когда вы определяете компонент с использованием класса ES6, общий шаблон для обработчика событий должен быть методом класса. Например, этот компонент Toggle отображает кнопку, которая позволяет пользователю переключаться между состояниями «ВКЛ» и «ВЫКЛ»:

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isToggleOn: true};
    // This binding is necessary to make `this` work in the callback
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    this.setState(state => ({
      isToggleOn: !state.isToggleOn
    }));
  }
  render() {
    return (
      <button onClick={this.handleClick}>
        {this.state.isToggleOn ? 'ON' : 'OFF'}
      </button>
    );
  }
}
ReactDOM.render(
  <Toggle />,
  document.getElementById('root')
);

Вы должны быть осторожны со значением 'this' в обратных вызовах JSX. В JavaScript методы класса не связаны по умолчанию. Если вы забудете связать this.handleClick и передать его onClick, это будет неопределенным при вызове функции.

Это не специфичное для React поведение; это часть того, как функции работают в JavaScript. Обычно, если вы ссылаетесь на метод без () после него, такой как onClick = {this.handleClick}, вы должны связать этот метод.

Если вызов bind раздражает вас, есть два способа обойти это. Если вы используете экспериментальный синтаксис открытых полей классов, вы можете использовать поля классов для правильной привязки обратных вызовов:

class LoggingButton extends React.Component {
  // This syntax ensures `this` is bound within handleClick.
  // Warning: this is *experimental* syntax.
  handleClick = () => {
    console.log('this is:', this);
  }
  render() {
    return (
      <button onClick={this.handleClick}>
        Click me
      </button>
    );
  }
}

Этот синтаксис включен по умолчанию в приложении Create React.

Если вы не используете синтаксис полей класса, вы можете использовать функцию стрелки в обратном вызове:

class LoggingButton extends React.Component {
  handleClick() {
    console.log('this is:', this);
  }
  render() {
    // This syntax ensures `this` is bound within handleClick
    return (
      <button onClick={(e) => this.handleClick(e)}>
        Click me
      </button>
    );
  }
}

Проблема с этим синтаксисом заключается в том, что каждый раз при рендеринге LoggingButton создается другой обратный вызов. В большинстве случаев это нормально. Однако, если этот обратный вызов передается в качестве поддержки более низким компонентам, эти компоненты могут выполнить дополнительный повторный рендеринг. Мы обычно рекомендуем связывание в конструкторе или использование синтаксиса полей класса, чтобы избежать такого рода проблем с производительностью.

Передача аргументов обработчикам событий

Внутри цикла принято передавать дополнительный параметр в обработчик событий. Например, если id - это идентификатор строки, подойдет любое из следующих:

<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>

Вышеуказанные две строки эквивалентны и используют функции-стрелки и Function.prototype.bind соответственно.

В обоих случаях аргумент e, представляющий событие React, будет передан в качестве второго аргумента после идентификатора. С помощью функции стрелки мы должны передать ее явно, но с помощью bind все дальнейшие аргументы автоматически передаются.