{"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

Інша відмінність полягає в тому, що ви не можете повернути false для того, щоб запобігти поведінці за замовчуванням у React. Ви маєте явно викликати 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 компонент рендерить кнопку, котра дозволяє користувачу перемикатись між станами “ON” і “OFF”:

\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 ? 'ON' : 'OFF'}\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 створюється нова функція зворотнього виклику. У більшості випадків це не створює додаткових проблем. Але, якщо ця функція зворотнього виклику передається в якості пропcу в компоненти нижче - вони можуть здійснити додатковий ререндеринг. Як правило, ми рекомендуємо зв’язувати в конструкторі або використувати синтаксис полей класу, щоб уникнути подібних проблем з продуктивністю.

\n

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

\n

Всередині циклу доволі часто потрібно передати додатковий параметр до обробника події. Наприклад, якщо id це 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, буде переданий другим аргументом після ID. Для стрілкової функції ми маємо зробити передачу явною, але для 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":[]}