javascript - 在 React.js 中使用 onKeyPress 而不是 onKeyUp 检测何时按下删除或退格键

Question

我需要在按下删除键或退格键时激活一项功能。该调用是在作为表格一部分的号码输入字段内进行的。这有效:

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 释放按键时触发该函数。

大家有什么想法吗？谢谢。

Answer 1

您可以使用经典 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);
  }
};