React onKeyPress 事件未检测到退格键答案

【问题标题】：React onKeyPress event isn't detecting backspaceReact onKeyPress 事件未检测到退格键
【发布时间】：2020-09-04 02:16:27
【问题描述】：

我有一个handleBackspace 函数，如果按下退格键，它会执行一些操作。

我试过了：

const handleBackspace = (e) => {
    if(e.keyCode === 8) {
        console.log('1')
    }
}

//
<input onKeyPress={handleBackspace}>

但这不起作用。（我用 keyCode 13 [enter] 试过了，它起作用了。但是 keyCode 8 [backspace] 不起作用）有人能给我一个解决方案吗？

【问题讨论】：

您是否尝试映射 [backspace] 或 [delete] 键？ [delete] 是 46。另外，如果您记录事件 e，keyCode 是什么？
我要检测退格
您使用onKeyPress 有什么原因吗？因为对于该事件，keyCode 将始终为 0。您是否尝试过使用 onKeyDown？
它有效。谢谢。我真的不知道它们之间的区别
@Roy 更多信息可以在here找到

标签： javascript reactjs onkeypress

【解决方案1】：

可以阅读here，onKeyPress 只接收charCode 而不是keyCode。

这给了我们三个可能的答案：

要么将事件更改为onKeyDown
更改侦听器以检查e.charCode
使用e.which，它适用于onKeyPress 和onKeyDown。

【讨论】：

【解决方案2】：

onKeyDown 检测到keyCode 事件。

尝试将其更改为 onKeyDown 事件。

沙盒：https://codesandbox.io/s/react-basic-class-component-kzv2k?file=/src/index.js

  handleBackspace = e => {
    if (e.keyCode === 8) {
      console.log("1");
    }
  };

  render() {
    return <input onKeyDown={this.handleBackspace} />;
  }

【讨论】：