Перевод официальной документации библиотеки React.js на русском языке.

Оглавление:

1 — Часть первая — Установка
2 — Часть вторая — Внедрение JSX
3 — Часть третья — Отрисовка элементов
4 — Часть четвертая — Компоненты и свойства
5 — Часть пятая — Состояние и жизненный цикл
6 — Часть шестая — Обработка событий
7 — Часть седьмая — Условный рендеринг
8 — Часть восьмая — Списки и ключи
9 — Часть девятая (скоро)

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

Обработка событий с элементами React очень схожа с обработкой событий с элементами DOM.

Существует несколько синтаксических различий:

Названия событий React создаются с помощью camelCase, а не lowercase. С JSX вы передаете функцию как обработчик события, а не строку. Например, HTML:

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

В React это выглядит немного по-другому:

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

Еще одно отличие заключается в том, что в React Вы не можете вернуть false к предыдущему состоянию по умолчанию. Явно необходим алгоритм preventDefault. Например, с помощью обычного 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>
  );
}

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

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

Когда вы определяете компонент, используя класс ES6, общим образцом для обработчика событий и будет алгоритмом класса. Например, компонент Toggle отображает кнопку, которая позволяет пользователям выбирать между состояниями «ON» и «OFF»:

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(prevState => ({
      isToggleOn: !prevState.isToggleOn
    }));
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        {this.state.isToggleOn ? 'ON' : 'OFF'}
      </button>
    );
  }
}

ReactDOM.render(
  <Toggle />,
  document.getElementById('root')
);

Попробуйте повторить этот пример в CodePen.

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

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

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

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 App включен по умолчанию. Если вы не используете инициализаторы свойств, вы можете применить стрелочную функцию (arrow function) в обратных сигналов:

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. Чаще всего, это нормальное явление. Однако если обратные сигналы передаются как свойства для нижних компонентов, то такие компоненты могут произвести повторное демонтирование. Чаще всего, мы советуем производить связывание в конструкторе, чтобы избежать подобных проблем с производительностью.

constructor(props) {
 super(props);
 this.addTodo = this.addTodo.bind(this);
}

 <button
 className='btn btn-primary'
 onClick={this.addTodo}
 >
Add todo</button>