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

【问题标题】：How to prevent opening of react video modal on click of ESC button?如何防止在单击 ESC 按钮时打开反应视频模式？
【发布时间】：2020-07-10 13:59:11
【问题描述】：

我正在使用 react-modal-video 和 gatsby 创建一个视频页面。每当页面加载并单击 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>

【问题讨论】：

标签： javascript gatsby

【解决方案1】：

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

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

【讨论】：