我已经在React中尝试了onFullScreenChange,但是它不起作用,因此我必须使用addEventListener,我想知道React是否支持fullscreenchange事件吗?谢谢您的帮助
答案 0 :(得分:2)
没有onFullScreenChange
,您可以在related docs中看到所有受支持的事件。
您可以查看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 :(得分:1)
React repo中似乎没有该标识符。