时间戳

首页 > 解决方案 > 如何防止在单击 ESC 按钮时打开反应视频模式？

javascript - 如何防止在单击 ESC 按钮时打开反应视频模式？

问题描述

我正在使用带有gatsby的 react-modal-video创建一个视频页面。每当页面加载并单击 ESC 按钮时，视频模式就会自动打开。但是视频模式只能在单击按钮时打开。我想在单击 ESC 按钮时停止打开视频模式的这种转换。我不知道如何阻止这种转变。如果有人知道，请告诉我。

我的代码

const [modal_open, setModalToggle] = useState(false)
const modalToggle = () => setModalToggle(!modal_open)

<ModalVideo channel={props.channel} isOpen={modal_open} videoId={props.video_id} onClose={modalToggle} />

<button onClick={modalToggle}>Show Video</button>

标签： javascriptgatsby

解决方案

我跟踪react-modal-video 源代码。该软件包不支持通过 ESC 的 keydown 事件关闭 Modal 的道具。也许您可以尝试在包默认事件上添加一个 keydown 事件侦听器。但我不确定它是否可以工作。

document.addEventListener('keydown', e => {
  if (e.keyCode === 27) {
    e.preventDefault();
});

推荐阅读