反应+钩子:改变状态在ESC出版社，而在全屏？

Question

我正在尝试创建一个简单的应用程序，在按钮上进入全屏，然后将全屏放在另一个上。

虽然我已经知道了这一点，但当我按下ESC离开全屏时，我无法更新状态。

import { useState } from "react"

export default function Home() {
  const [isFullscreen, setFullscreen] = useState(false)

  const makeFullscreen = () => {
    setFullscreen(true)
    document.documentElement.requestFullscreen()
  }

  const closeFullscreen = () => {
    setFullscreen(false)
    document.exitFullscreen()
  }

  console.log(isFullscreen)
  return (
    <div
      className={`flex flex-col items-center justify-center w-full h-screen ${
        isFullscreen ? "bg-black" : ""
      }`}
    >
      <div
        className={`w-5/6 space-y-6 text-center wrapper ${
          isFullscreen ? "hidden" : "visible"
        }`}
      >
        <button
          onClick={makeFullscreen}
          className={`btn btn-primary ${!isFullscreen ? "visible" : "hidden"}`}
        >
          START TEST
        </button>
      </div>
      <button
        onClick={closeFullscreen}
        className={`btn btn-accent ${isFullscreen ? "visible" : "hidden"}`}
      >
        STOP TEST
      </button>
    </div>
  )
}

我在Google上发现了一些东西，但只有在它不在全屏的情况下，它们才能正常工作。

如果能弄清楚那会很好。

奖励:更好的全屏输入/退出方式:)

Answer 1

我做了一些研究，我想我找到了一个更优雅的方法来处理这个问题，利用反应全屏的npm包。

我实现它的方式：

import { useState, useCallback } from "react"
import { FullScreen, useFullScreenHandle } from "react-full-screen"

export default function Home() {
  const handle = useFullScreenHandle()
  const [isFullscreen, setFullscreen] = useState(false)

  const reportChange = useCallback((state) => {
    console.log(state)
    if (state === true) {
      setFullscreen(true)
    } else if (state === false) {
      setFullscreen(false)
    }
  })

  return (
    <div
      className={`flex flex-col items-center justify-center w-full h-screen ${
        isFullscreen ? "bg-black" : ""
      }`}
    >
      <div className={`w-5/6 space-y-6 text-center md:w-3/6 xl:w-2/6`}>
        <button
          onClick={(e) => {
            handle.enter()
            setFullscreen(true)
          }}
          className={`btn btn-primary ${!isFullscreen ? "visible" : "hidden"}`}
        >
          
          START TEST
        </button>

       
      <FullScreen
        onChange={reportChange}
        className={`${
          isFullscreen
            ? "flex flex-col items-center justify-center w-full h-screen"
            : ""
        }`}
        handle={handle}
      >
        <button
          onClick={() => {
            handle.exit()
            setFullscreen(false)
          }}
          className={`btn btn-info ${!isFullscreen ? "hidden" : "visible"}`}
        >
          STOP TEST
        </button>
      </FullScreen>
    </div>
  )
}

这将自动检查应用程序是否处于reportChange函数的全屏状态，然后将isFullscreen的状态分别设置为true或false。

因为它是onChange，所以当使用ESC的全屏时，它会自动工作。

这解决了我遇到的特殊问题。

Answer 2

我把您的代码片段翻译成了代码沙箱(对于以后的文章，这非常有帮助！)并添加了这个缺失的useEffect()实例，似乎已经满足了您的需要。它是可用的这里。

简言之，宣布了以下需要：

  const escapeHandler = (e) => {
    if (e.key === "Escape") {
      closeFullscreen();
    }
  };

  useEffect(() => {
    document.addEventListener("keydown", escapeHandler, false);
    return () => {
      document.removeEventListener("keydown", escapeHandler, false);
    };
  }, []);

正如我在上面的注释中所指出的，这个钩子是在初始呈现时将keydown侦听器添加到文档中。该侦听器将保留在文档上，直到这个组件卸载并执行钩子的清理阶段(执行返回的匿名函数)。

有关useEffect()清理的更多信息，请参见useEffect()，有关密钥的更多信息，请参见这里。