React中div元素绑定onKeyUp事件不生效如何解决

键盘事件只会派发到当前处于聚焦状态的可交互元素上。普通<div>默认不属于可聚焦元素，即便铺满整个视口，也无法接收键盘事件，直接绑定onKeyUp自然不会触发。将事件绑定到App组件上不生效也是同理：App组件最终渲染为普通DOM节点，默认同样不具备聚焦能力。

方案1：让目标div支持聚焦，保留React合成事件写法 #

给div添加tabIndex属性使其成为可聚焦元素，如果需要页面加载后无需点击就能响应键盘事件，需要主动调用focus()方法让元素获得焦点：

// 函数组件示例
import { useRef, useEffect } from 'react'

function Player() {
  const containerRef = useRef(null)
  useEffect(() => {
    // 挂载后自动聚焦容器
    containerRef.current?.focus()
  }, [])

  return (
    <div 
      className="playerContainer"
      ref={containerRef}
      tabIndex={0} // 设为0代表可通过Tab键聚焦，设为-1代表只能通过JS主动聚焦
      onKeyUp={gameState.toggleCP}
    ></div>
  )
}

注意：这种方案如果用户后续点击了页面上其他可聚焦元素（比如输入框、按钮），容器会失焦，键盘事件就会再次失效，适合仅需要在容器聚焦状态下响应按键的场景。

方案2：绑定全局原生键盘事件（最常用，无聚焦限制） #

如果需要整个页面打开后无论焦点在哪个元素上都能响应按键抬起事件，直接在组件挂载时给window/document绑定原生keyup事件即可，记得组件卸载时移除监听避免内存泄漏：

// 类组件示例
class App extends React.Component {
  componentDidMount() {
    window.addEventListener('keyup', this.handleKeyUp)
  }

  componentWillUnmount() {
    window.removeEventListener('keyup', this.handleKeyUp)
  }

  handleKeyUp = (e) => {
    // 可按需增加按键判断逻辑，比如仅响应空格键抬起
    // if (e.code === 'Space') gameState.toggleCP()
    gameState.toggleCP()
  }

  render() {
    return <div className="playerContainer"></div>
  }
}

如果是函数组件，把监听逻辑放到useEffect里即可：

useEffect(() => {
  const handleKeyUp = () => gameState.toggleCP()
  window.addEventListener('keyup', handleKeyUp)
  return () => window.removeEventListener('keyup', handleKeyUp)
}, [])

内容的提问来源于stack exchange，提问作者5alidshammout