Javascript 在React.js中，当使用onKeyPress而不是onKeyUp按下Delete或Backspace键时进行检测

我需要在按下Delete或Backspace键时激活一个功能。调用是在作为表单一部分的数字输入字段中进行的。这项工作：

onKeyUp={((e) => this.onCero(e))}

这不起作用：

onKeyDown ={((e) => this.onCero(e))}

我正在调用的函数：

onCero = (e) => {
    e.preventDefault();
    if (e.key === "Delete" || e.key === "Backspace") {
        alert(e.key);
    }
};

我需要在按下该键时触发该函数，而不是在使用React或JavaScript释放该键时触发

---

有什么想法吗，伙计们？谢谢。

您可以使用经典JavaScript的事件监听器

应该是这样的：

componentDidMount() {
  document.addEventListener('keydown', this.onCero, false);
}

componentWillUnmount() {
  document.removeEventListener('keydown', this.onCero, false);
}

然后使用onCero函数中的键代码：

onCero = (e) => {
  if (e.keyCode === 27 || e.keyCode === 13) {
    alert(e.keyCode);
  }
};

---

您的代码似乎运行良好

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
}
onCero=（e）=>{
控制台日志（e.key）；
e、 预防默认值（）；
如果（e.key==“删除”| | e.key==“退格”）{
警惕（e.key）；
}
};
render（）{
返回(
这个.onCero（e））}/>
)
}
}
ReactDOM.render(
,
document.getElementById（“根”）
);

您可以通过onKeyPress={this.onCero}调用它。这应该可以工作
侧注：
onCero
已经绑定到实例，并且具有事件处理程序的签名。无需将其包装在另一个箭头函数中
onKeyDown={this.onCero}
。这样你就不会改变输入的道具（至少不会通过这个）。因此不太必要updates@Thomas，谢谢，伙计，你说得对。我的目的是在onKey事件中运行函数。只是把它带到外面进行测试，这就是那里的arrow函数的原因：）我选择了这种方法，因为现在我可以使用其他事件处理程序，如onChange或onInput，如果需要，还可以在需要时触发该函数。我刚刚将Keycodes的值更改为e.keyCode==8 | | e.keyCode==46以匹配delete和backspace。非常感谢。