Как в 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-дерева, мы этот обработчик удаляем. События для документа добавляются аналогичным образом.

Композиция с помощью HOC (Higher Order Component) в React

Компонент высшего порядка в React (Higher Order Component или сокращенно HOC) – это простая javascript-функция, которая принимает на вход один или несколько компонентов и возвращает другой компонент.

Сохранение состояния в React Component: особенности работы метода setState

Прежде всего давайте разберемся, что такое внутреннее состояние компонента в React и для чего оно может понадобиться. После этого поговорим об особенностях работы метода setState.

Разбираемся со связкой React и Redux на простейшем примере

Простой пример, который поможет быстро разобраться, как управлять данными с помощью библиотеки Redux в ваших приложениях на React.

Комментарии (0)

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