В этой статье блога мы углубимся в обработку событий в компонентах класса React с использованием методов createRef и addEventListener. Мы рассмотрим, как настраивать прослушиватели событий, обрабатывать события и предоставим примеры кода для иллюстрации концепций. Давайте начнем!

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

Настройка ссылки с помощью createRef:
Чтобы использовать createRef, мы сначала импортируем ее из пакета «реагировать». Давайте рассмотрим пример, в котором мы хотим прикрепить прослушиватель событий к элементу кнопки.

import React, { createRef } from 'react';
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.buttonRef = createRef();
  }
  componentDidMount() {
    // Access the button element using the ref
    const button = this.buttonRef.current;
    // Attach an event listener
    button.addEventListener('click', this.handleButtonClick);
  }
  componentWillUnmount() {
    // Clean up the event listener
    const button = this.buttonRef.current;
    button.removeEventListener('click', this.handleButtonClick);
  }
  handleButtonClick = () => {
    // Event handling logic goes here
    console.log('Button clicked!');
  }
  render() {
    return (
      <button ref={this.buttonRef}>Click Me</button>
    );
  }
}

В приведенном выше коде мы создаем ссылку с помощью createRef и присваиваем ее this.buttonRefв конструкторе. В методе жизненного цикла componentDidMountмы получаем доступ к элементу кнопки с помощью ссылки и присоединяем к нему прослушиватель событий. Мы также предоставляем соответствующую функцию-обработчик handleButtonClick, которая будет вызываться при нажатии кнопки. В методе жизненного цикла componentWillUnmountмы очищаем прослушиватель событий, чтобы избежать утечек памяти.

Обработка событий с помощью addEventListener:
Теперь, когда мы настроили прослушиватель событий, давайте посмотрим, как мы можем обрабатывать события. В предыдущем примере метод handleButtonClickвызывался при нажатии кнопки. Вот еще один пример, демонстрирующий обработку событий для элемента ввода текста:

import React, { createRef } from 'react';
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.inputRef = createRef();
  }
  componentDidMount() {
    const input = this.inputRef.current;
    input.addEventListener('change', this.handleInputChange);
  }
  componentWillUnmount() {
    const input = this.inputRef.current;
    input.removeEventListener('change', this.handleInputChange);
  }
  handleInputChange = (event) => {
    // Access the input value
    const newValue = event.target.value;
    console.log('Input value changed:', newValue);
  }
  render() {
    return (
      <input type="text" ref={this.inputRef} />
    );
  }
}

В этом примере мы прикрепляем прослушиватель событий к элементу ввода для события «изменение», используя addEventListener. Функция handleInputChangeвызывается всякий раз, когда изменяется входное значение. Внутри обработчика мы можем получить доступ к обновленному значению, используя event.target.value.