过时的值
过时的值
当我在 90 年代末首次开始使用计算机时,我使用了两个不同的媒体播放器。
对于直播,我使用了 RealPlayer:
RealPlayer 还不错,但并没有什么个性。对我那个青春期的自己来说,还有一个更酷的选择:Winamp。
在那些早期的日子和现在之间,出现了无数媒体播放器,但它们都有一个共同点。我使用过的每一个媒体播放器都实现了完全相同的键盘快捷键:
空格键将播放(或暂停)当前选定的歌曲。
在本模块的早些时候,我们构建了一个简单的媒体播放器,我认为我们应该更新它以包含空格键快捷方式!
如果你愿意,我鼓励你花几分钟尝试这个问题,但我现在要警告你:这 surprisingly tricky。
焦点和 iframe
本课程平台中的操场使用 iframes 来显示“结果”面板。这对事件监听器等内容带来了一些挑战!
要测试您的解决方案,您需要在 iframe 内单击,以便空格键事件在正确的上下文中触发。您可以在 iframe 内的任何地方单击。
让我们谈谈这个。
这是视频中的图表:
缺失依赖项:
将 isPlaying 添加为依赖项:
使用回调函数解决:
解决方案代码
事件冒泡
在我们上面的实现中,用户体验存在一个小但恼人的 bug。
这与 useEffect 或我们在本模块中讨论的内容无关,但我想分享一个关于这个主题的简短视频,以防你遇到这个问题。
这是我们的最终实现: