组件中的React KeyDown事件处理程序-函数错误

Question

我正在用ReactJs创建一个网页，但我遇到了一个问题。我正在尝试使用keydown事件处理页面中的回车键按下。以下是一段代码：

class ManageUser extends React.Component {
componentDidMount() {
window.addEventListener("keydown", this.keyEventHandler, false);
}
keyEventHandler(event: KeyboardEvent) {        
if (event.keyCode === KEY_CODE.ENTER) {
this.handlerUserEntry(); //Getting error here....
}
}
handlerUserEntry() {
console.log('handle user entry here');
}
}

我能够捕捉回车键事件。但当我试图从keyEventHandler函数调用this.handlerUserEntry();时，我得到了以下错误：

TypeError：this.handlerUserEntry不是函数

我做错了什么？

Answer 1

正如Florian在他们的评论中建议的那样，您传递的任何函数引用都需要绑定到您的类，否则this.handlerUserEntry中的this将不会指向ManageUser类。

您可以通过添加一个构造函数来实现这一点，其中包含以下代码：

class ManageUser extends React.Component {
ManageUser(props) {
this.handleUserEntry = this.handleUserEntry.bind(this);
}
...
}

Answer 2

我会避免使用componentDidMount((作为React当前文档中不推荐使用的功能。

在这里，我可以在React Events上获得一个工作组件。

下面是我的工作组件：

import React from 'react';
class ManageUser extends React.Component {
handler(event) {
alert(`
key: ${event.key}
keyCode: ${event.keyCode}
altKey: ${event.altKey}
ctrlKey: ${event.ctrlKey}
metaKey: ${event.metaKey}
shiftKey: ${event.shiftKey}
`)
}
render() {
return (
<div style={{display: 'flex', justifyContent: 'center'}}>
<input
placeholder='Hit a key...'
onKeyDown={this.handler}
onKeyPress={this.handler}
onKeyUp={this.handler}
/>
</div>
)

}
}
export default ManageUser

Answer 3

我没有使用自定义的keydown处理程序，而是开始使用"react keydown"npm包，问题得到了解决。