在组件中反应 KeyDown 事件处理程序 - 功能错误答案

【问题标题】：React KeyDown event handler in compnent - function error在组件中反应 KeyDown 事件处理程序 - 功能错误
【发布时间】：2021-01-07 15:31:52
【问题描述】：

我正在使用 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 不是函数

我在这里做错了什么？

【问题讨论】：

你可能需要绑定handlerUserEntry:freecodecamp.org/news/…
您是否尝试将事件传递给您的 handleUserEntry 函数。再加上将其更新为箭头函数，因此它绑定到您的 Class 组件
我也试过这个。这不起作用。如果我从其他函数调用 this.handleUserEntry() 它工作正常。问题仅发生在 keydown 事件发生时。
不是一个解决方案，但我认为您使用的是旧版本的管理事件和旧的反应。我使用过类似的功能，但代码绝对不是这样的。

标签： reactjs

【解决方案1】：

我没有使用自定义 keydown 处理程序，而是开始使用“react-keydown”npm 包并解决了问题。

【讨论】：

【解决方案2】：

我会避免使用 componentDidMount() 作为 deprecated feature in React's current docs。

在 React Events here 的一些帮助下，我能够获得一个工作组件。

下面是我的工作组件：

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

【讨论】：

componentDidUpdate() 未被弃用。请检查文档。我想处理窗口上的 keydown 事件，而不是来自特定控件。

【解决方案3】：

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

您可以通过按原样添加其余代码的构造函数来做到这一点：

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

【讨论】：

我也试过这个。这不起作用。如果我从其他函数调用 this.handleUserEntry() 它工作正常。问题仅发生在 keydown 事件发生时。