Как в React повесить DOM-событие на window или document?

18.09.2018 / oberset

Иногда внутри React-компонента требуется повесить DOM-событие на window или document, например, если нужно добавить обработчик события resize или scroll окна браузера. Лучше всего для этих целей подойдут методы жизненного цикла компонента componentDidMount и componentWillUnmount: class MyComponent extends Component { componentDidMount() { window.addEventListener('resize', this.handleResize); } componentWillUnmount() { window.removeEventListener('resize', this.handleResize); } handleResize = (event) => { // todo something }; }

После инициализации компонента мы вешаем обработчик на событие resize, после удаления компонента из DOM-дерева, мы этот обработчик удаляем. События для документа добавляются аналогичным образом.

Обзоры по теме:
Комментарии (0)

Зарегистрируйтесь или авторизуйтесь, чтобы оставлять комментарии.