Почему моя программа c медиа-запрос не работает (React. js) - PullRequest
Новая
       42

Почему моя программа c медиа-запрос не работает (React. js)

1 голос
/ 14 июля 2020 
const [smallerScreen, setSmallerScreen] = useState(false)

useEffect(() => {
  const list = window.matchMedia("(max-width: 56.25em)")

  const handler = list => {
    setSmallerScreen(list.matches)
  }

  handler(list)

  list.addEventListener(handler)

  return () => {
    list.removeEventListener(handler)
  }
}, [])

Я хотел бы программно обновить свой пользовательский интерфейс, когда область просмотра достигает определенной ширины, но мой код выдает следующую ошибку: 

TypeError: Failed to execute 'addEventListener' on 'EventTarget': 2 arguments 
required, but only 1 present.

При чтении документации в Mozilla я вижу только одну аргумент передан в функцию-обработчик, поэтому я не понимаю эту ошибку. Кто-нибудь может увидеть, что я сделал не так?

1 Ответ

0 голосов
/ 15 июля 2020

В возвращенном списке это addListener / removeListener

useEffect(() => {
  const list = window.matchMedia("(max-width: 56.25em)");

  const handler = list => {
    setSmallerScreen(list.matches);
  };

  handler(list);

  list.addListener(handler);

  return () => {
    list.removeListener(handler);
  };
}, []);

Получение уведомлений о запросах

Edit Programmatic Media Query with React Hook match addListener

You can alternatively attach handler callback to the window resize event.

export default function App() {
  const [smallerScreen, setSmallerScreen] = useState(false);

  const handler = () => {
    const list = window.matchMedia("(max-width: 56.25em)");
    setSmallerScreen(list.matches);
  };

  ...

  useEffect(() => {
    handler(); // invoke once when mounting

    window.addEventListener('resize', handler);
    
    return () => {
      window.removeEventListener('resize', handler);
    };
  }, []);

  ...
}

Редактировать программу c Media Query с помощью React Hook

...