专注于 div 元素 - React答案

【问题标题】：Focusing on a Div Element - React专注于 div 元素 - React
【发布时间】：2020-04-20 10:19:27
【问题描述】：

我希望在显示“级别”时按下某个键时触发 onKeyPress 事件。根据我的阅读，需要关注一个 div 以便它们注册 - 但我不太确定如何使用功能组件来实现这一点。

const handleKeyPress = e => {
    console.log(e);
}

export default () => {
    const [currentLevel, setCurrentLevel] = useState(1);

    return (
        <Level onKeyPress={handleKeyPress} />
    )
}

【问题讨论】：

那么到底出了什么问题？到底什么是<Level>？事实上，只有当焦点位于触发按键的元素上时才会触发按键（或者，我认为也是在文档上）。
@minitauros 是一个在 render 方法中只有一个

的组件。
那么是的，正如@Lekoaf 下面所说，<div> 元素通常不会注册按键。您可以改为在 document 上注册事件侦听器。然后在那次活动期间，您必须找到<Level> div，但这听起来并不难。

标签： javascript html css reactjs

【解决方案1】：

您是否尝试过在 useEffect 中添加事件监听器？

useEffect(() => {
    const myFunc = () => {}

    document.addEventListener('keyPress', myFunc)

    return () => {
        document.removeEventListener('keyPress', myFunc)
    }
}, [])

【讨论】：