OnKeyDown 事件在 React 中对 div 无效

我想在 React 中的 div 上使用 keyDown 事件。我需要:

  componentWillMount() {
document.addEventListener("keydown", this.onKeyPressed.bind(this));
}


componentWillUnmount() {
document.removeEventListener("keydown", this.onKeyPressed.bind(this));
}
  

onKeyPressed(e) {
console.log(e.keyCode);
}
    

render() {
let player = this.props.boards.dungeons[this.props.boards.currentBoard].player;
return (
<div
className="player"
style={{ position: "absolute" }}
onKeyDown={this.onKeyPressed} // not working
>
<div className="light-circle">
<div className="image-wrapper">
<img src={IMG_URL+player.img} />
</div>
</div>
</div>
)
}

它工作的很好，但我想做更多的反应风格。我试过了

onKeyDown={this.onKeyPressed}

但是它没有反应。我记得它是在输入元素上工作的。

Codepen

我该怎么做？

180703 次浏览
小开

你得这么写

<div
className="player"
style=\{\{ position: "absolute" }}
onKeyDown={this.onKeyPressed}
tabIndex="0"
>

如果 onKeyPressed没有绑定到 this，那么尝试使用箭头函数重写它，或者在组件 constructor中绑定它。

小开

你在纯 Javascript 中想得太多了。去掉那些 React 生命周期方法上的侦听器，使用 event.key而不是 event.keyCode(因为这不是 JS 事件对象，而是 React 合成事件)。您的整个组件可以像这样简单(假设您没有在构造函数中绑定方法)。

onKeyPressed(e) {
console.log(e.key);
}


render() {
let player = this.props.boards.dungeons[this.props.boards.currentBoard].player;
return (
<div
className="player"
style=\{\{ position: "absolute" }}
onKeyDown={this.onKeyPressed}
>
<div className="light-circle">
<div className="image-wrapper">
<img src={IMG_URL+player.img} />
</div>
</div>
</div>
)
}
小开
最佳答案

您应该使用 TabIndex属性来监听 React 中 div 上的 onKeyDown事件。设置 tabIndex="0"应激发处理程序。

小开

答案是

<div
className="player"
onKeyDown={this.onKeyPressed}
tabIndex={0}
>

对我有效，请注意 tabIndex 需要一个数字，而不是一个字符串，所以 tabIndex = “0”不起作用。

小开

使用 div技巧与 tab_index="0"或 tabIndex="-1"一起工作，但任何时候用户正在集中一个视图，而不是一个元素，你得到一个丑陋的焦点轮廓在整个网站。这个问题可以通过设置在焦点中使用 outline: none的 div 的 CSS 来解决。

下面是使用样式化组件的实现:

import styled from "styled-components"


const KeyReceiver = styled.div`
&:focus {
outline: none;
}
`

在 App 类中:

  render() {
return (
<KeyReceiver onKeyDown={this.handleKeyPress} tabIndex={-1}>
Display stuff...
</KeyReceiver>
)
小开

另外，请记住，这个技巧只有在将焦点设置在 div 上时才有效。如果希望在 div 弹出时立即管理按键，可以使用 这个把戏(对于 Drawers/Modals 特别有用)

小开

对于任何其他人有这个问题，我正在失去的关键向下和向上键不工作的情节，你可以使用鼠标事件。

这对我来说很好。

import './App.css'


function App() {
const handleDown = () => {
console.log('down')
}
const handleUp = () => {
console.log('up')
}
return (
<button onMouseDown={handleDown} onMouseUp={handleUp}>
PRESS DOWN
</button>
)
}


export default App

提交答案