{"componentChunkName":"component---src-templates-docs-js","path":"/docs/handling-events.html","result":{"data":{"markdownRemark":{"html":"

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

\n\n

Например, в HTML:

\n
<button onclick=\"activateLasers()\">\n  Активировать лазеры\n</button>
\n

В React немного иначе:

\n
<button onClick={activateLasers}>  Активировать лазеры\n</button>
\n

Ещё одно отличие — в React нельзя предотвратить обработчик события по умолчанию, вернув false. Нужно явно вызвать preventDefault. Например, в обычном HTML, чтобы отменить выполнение встроенного обработчика события у ссылки, которое открывает новую страницу, можно написать:

\n
<a href=\"#\" onclick=\"console.log('По ссылке кликнули.'); return false\">\n  Нажми на меня\n</a>
\n

В React это будет выглядеть так:

\n
function ActionLink() {\n  function handleClick(e) {    e.preventDefault();    console.log('По ссылке кликнули.');  }\n  return (\n    <a href=\"#\" onClick={handleClick}>      Нажми на меня\n    </a>\n  );\n}
\n

В приведённом выше коде e — это синтетическое событие. React определяет синтетические события в соответствии со спецификацией W3C, поэтому не волнуйтесь о кроссбраузерности. События React работают не совсем как нативные. Изучите руководство о SyntheticEvent, чтобы узнать о них больше.

\n

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

\n

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

\n
class Toggle extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {isToggleOn: true};\n\n    // Эта привязка обязательна для работы `this` в колбэке.    this.handleClick = this.handleClick.bind(this);  }\n\n  handleClick() {    this.setState(state => ({      isToggleOn: !state.isToggleOn    }));  }\n  render() {\n    return (\n      <button onClick={this.handleClick}>        {this.state.isToggleOn ? 'Включено' : 'Выключено'}\n      </button>\n    );\n  }\n}\n\nReactDOM.render(\n  <Toggle />,\n  document.getElementById('root')\n);
\n

Посмотреть на CodePen

\n

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

\n

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

\n

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

\n
class LoggingButton extends React.Component {\n  // Такой синтаксис гарантирует, что `this` привязан к handleClick.  // Предупреждение: это экспериментальный синтаксис  handleClick = () => {    console.log('значение this:', this);  }\n  render() {\n    return (\n      <button onClick={this.handleClick}>\n        Нажми на меня\n      </button>\n    );\n  }\n}
\n

Такой синтаксис доступен в Create React App по умолчанию.

\n

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

\n
class LoggingButton extends React.Component {\n  handleClick() {\n    console.log('значение this:', this);\n  }\n\n  render() {\n    // Такой синтаксис гарантирует, что `this` привязан к handleClick.    return (      <button onClick={() => this.handleClick()}>        Нажми на меня\n      </button>\n    );\n  }\n}
\n

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

\n

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

\n

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

\n
<button onClick={(e) => this.deleteRow(id, e)}>Удалить строку</button>\n<button onClick={this.deleteRow.bind(this, id)}>Удалить строку</button>
\n

Две строки выше — эквивалентны, и используют стрелочные функции и Function.prototype.bind соответственно.

\n

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

","frontmatter":{"title":"Обработка событий","next":"conditional-rendering.html","prev":"state-and-lifecycle.html"},"fields":{"path":"content/docs/handling-events.md","slug":"docs/handling-events.html"}}},"pageContext":{"slug":"docs/handling-events.html"}},"staticQueryHashes":[]}