Поддерживается ли событие fullscreenchange в React?

#javascript #reactjs

Вопрос:

Я пробовал onFullScreenChange в React, но он не работает, поэтому мне приходится использовать addEventListener для моего случая, интересно, поддерживается ли событие fullscreenchange в React? Спасибо за вашу помощь

Ответ №1:

Нет onFullScreenChange , вы можете увидеть все поддерживаемые события в связанных документах.

Вы можете проверить пример useFullscreenStatus реализации, чтобы использовать его в пользовательском хуке:

 export default function useFullscreenStatus(elRef) {
  const [isFullscreen, setIsFullscreen] = React.useState(
    document[getBrowserFullscreenElementProp()] != null
  );

  const setFullscreen = () => {
    if (elRef.current == null) return;

    elRef.current
      .requestFullscreen()
      .then(() => {
        setIsFullscreen(document[getBrowserFullscreenElementProp()] != null);
      })
      .catch(() => {
        setIsFullscreen(false);
      });
  };

  React.useLayoutEffect(() => {
    document.onfullscreenchange = () =>
      setIsFullscreen(document[getBrowserFullscreenElementProp()] != null);

    return () => {document.onfullscreenchange = undefined};
  });

  return [isFullscreen, setFullscreen];
}

function getBrowserFullscreenElementProp() {
  if (typeof document.fullscreenElement !== "undefined") {
    return "fullscreenElement";
  } else if (typeof document.mozFullScreenElement !== "undefined") {
    return "mozFullScreenElement";
  } else if (typeof document.msFullscreenElement !== "undefined") {
    return "msFullscreenElement";
  } else if (typeof document.webkitFullscreenElement !== "undefined") {
    return "webkitFullscreenElement";
  } else {
    throw new Error("fullscreenElement is not supported by this browser");
  }
}

1. Это мне очень помогло 🙂

2. Он работает везде, но в ios safari выдает ошибку, fullscreenElement не поддерживается этим браузером. @ Dennis есть идеи по этому поводу, это будет полезно для новичка

3. Мы удаляем функцию прослушивания в функции возврата. Итак, если у меня есть 2 элемента, использующие один и тот же хук на одной странице, и 1 из них отключен, не отсоединит ли он прослушиватель для другого?

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

Ответ №2:

Похоже, что в React repo нет ничего с этим идентификатором.

1.Для этого события есть два сценария github.com/facebook/react/search ?q = FullScreenChange github.com/facebook/react/blob/…github.com/facebook/react/blob /…Хотя это может быть связано с обновлениями React на протяжении многих лет.