@uzi_no_uzi

Почему не срабатывает событие resize?

import React from 'react';

    class Menu extends React.Component {
        constructor() {
            super();

            this.state = {
                height: window.innerHeight, 
                width: window.innerWidth,
            }


            this.updateDimensions = () => {
                this.setState({
                    height: window.innerHeight, 
                    width: window.innerWidth
                  });
            }

        }
        

        componentDidMount() {
            window.addEventListener("resize", this.updateDimensions);
            console.log('тут')
        }

        componentWillUnmount() {
            console.log('тут1')
            window.removeEventListener("resize", this.updateDimensions);
        }
        

        render() {
          

            return(
              <div></div>
            )
        }
    }

    export default Menu;


Пытался отловить событие изменения размеров окна. Но по какой-то причине срабатывает только первый console.log();

componentDidMount() {
          window.addEventListener("resize", this.updateDimensions);
          console.log('тут')
     }


Почему так происходит?
  • Вопрос задан
  • 665 просмотров
Решения вопроса 1
0xD34F
@0xD34F
События не срабатывают. Никакие и никогда. Срабатывают обработчики событий.

по какой-то причине срабатывает только первый console.log()

Так, первый, отлично. А второй какой? Это который в componentWillUnmount? Ну так правильно не срабатывает. Когда компонент будет удаляться из DOM - тогда и сработает. Или вы ждёте, что повторно сработает первый? - если так, то это абсурд.

Всё работает так, как и должно. Вы сделайте вывод свойств width и height в render - увидите, что они изменяются при изменении размеров окна (или перенесите console.log в updateDimensions).
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
AntonGre4ka
@AntonGre4ka
Можно кастомный хук написать
import React, {useEffect, useState} from 'react';

export const useWindowSize = () => {
	const [size, setSize] = useState([window.innerWidth, window.innerHeight])

	const handleResize = () => {
		setSize([window.innerWidth, window.innerHeight])
	}

	useEffect(() => {
		window.addEventListener('resize', handleResize)

		return () => window.removeEventListener('resize', handleResize)
	}, [size])

	return size
}

И в компоненте заюзать
const [width, height] = useWindowSize()
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы