Как я могу добавить обработчик кликов в BODY из компонента React?

Я создаю раскрывающееся меню React, которое должно закрываться, когда пользователь нажимает в любом месте DOM вне компонента.

Используя jQuery, я обычно добавляю прослушиватель событий к body, когда раскрывается раскрывающееся меню, и удаляем его снова, когда раскрывающееся окно закрывается. (Сам прослушиватель событий закрывает раскрывающееся меню - любые события щелчка внутри, компонент не распространяется, чтобы предотвратить срабатывание обработчика тела).

Можно ли подключить слушателя к элементу body из компонента React? Или я должен просто использовать jQuery? (Я немного опасаюсь смешивания React и jQuery.)

1 ответ

Реакция - это просто JavaScript, поэтому привязка обработчика кликов к любому элементу выполняется как обычно с помощью addEventListener(). Выполнение этого в componentDidMount обычно очень хорошо, аккуратно и очищается после себя в componentWillUnmount, удаляя добавленный обработчик событий.

var Component = React.createClass({
 componentDidMount: function () {
 document.body.addEventListener('click', this.myHandler);
 },
 componentWillUnmount: function () {
 document.body.removeEventListener('click', this.myHandler);
 },
 myHandler: function () {
 alert('click');
 },
 render: function() {
 return <div>Hello {this.props.name}</div>;
 }
});

licensed under cc by-sa 3.0 with attribution.