ReactJS - добавить пользовательский прослушиватель событий к компоненту

Теперь у меня есть React Component, внутри этого компонента, в методе рендеринга, я возвращаю свой div. Как я могу добавить прослушиватель событий для своего пользовательского события? (Я использую эту библиотеку для телевизионных приложений - навигация)

Я применил все идеи, представленные в ответах. Я установил навигационную библиотеку в режим отладки, и я могу перемещаться по пунктам своего меню только на основе клавиатуры (как вы можете видеть на скриншоте, я смог перейти к фильмам 4), но когда я фокусирую элемент в меню или нажмите enter, я ничего не вижу в консоли.

Я оставил несколько строк с комментариями, потому что в обоих случаях я не могу записать строки консоли.

Обновление № 2: эта библиотека навигации не работает с React с ее оригинальными HTML-тегами, поэтому мне пришлось установить параметры и переименовать теги, чтобы использовать aria- *, чтобы это не влияло на React.

Ответы

Ответ 1

Если вам нужно обрабатывать события DOM, еще не предоставленные React, вам необходимо добавить прослушиватели DOM после монтирования компонента:

Обновление: Между Реактом 13, 14 и 15 были внесены изменения в API, которые повлияли на мой ответ. Ниже приведен последний способ использования React 15 и ES7. См. историю ответов для более старых версий.

class MovieItem extends React.Component {

  componentDidMount() {
    // When the component is mounted, add your DOM listener to the "nv" elem.
    // (The "nv" elem is assigned in the render function.)
    this.nv.addEventListener("nv-enter", this.handleNvEnter);
  }

  componentWillUnmount() {
    // Make sure to remove the DOM listener when the component is unmounted.
    this.nv.removeEventListener("nv-enter", this.handleNvEnter);
  }

  // Use a class arrow function (ES7) for the handler. In ES6 you could bind()
  // a handler in the constructor.
  handleNvEnter = (event) => {
    console.log("Nv Enter:", event);
  }

  render() {
    // Here we render a single <div> and toggle the "aria-nv-el-current" attribute
    // using the attribute spread operator. This way only a single <div>
    // is ever mounted and we don't have to worry about adding/removing
    // a DOM listener every time the current index changes. The attrs 
    // are "spread" onto the <div> in the render function: {...attrs}
    const attrs = this.props.index === 0 ? {"aria-nv-el-current": true} : {};

    // Finally, render the div using a "ref" callback which assigns the mounted 
    // elem to a class property "nv" used to add the DOM listener to.
    return (
      <div ref={elem => this.nv = elem} aria-nv-el {...attrs} className="menu_item nv-default">
        ...
      </div>
    );
  }

}

Пример на Codepen.io

Ответ 2

Вы можете использовать componentDidMount и componentWillUnmount методы:

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class MovieItem extends Component
{
    _handleNVEvent = event => {
        ...
    };

    componentDidMount() {
        ReactDOM.findDOMNode(this).addEventListener('nv-event', this._handleNVEvent);
    }

    componentWillUnmount() {
        ReactDOM.findDOMNode(this).removeEventListener('nv-event', this._handleNVEvent);
    }

    [...]

}

export default MovieItem;

Ответ 3

Во-первых, пользовательские события не очень хорошо работают с компонентами React. Таким образом, вы не можете просто сказать <div onMyCustomEvent={something}> в функции рендеринга и должны подумать о проблеме.

Во-вторых, после того, как вы заглянули в документацию для библиотеки, которую вы используете, событие действительно запускается на document.body, поэтому даже если это сработало, ваш обработчик событий никогда не будет запускаться.

Вместо этого внутри componentDidMount где-то в вашем приложении вы можете прослушивать nv-enter, добавив

document.body.addEventListener('nv-enter', function (event) {
    // logic
});

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