检测何时使用onKeyPress而不是onKeyUp在React.js中按下Delete或Backspace键

Question

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

有想法吗？ 谢谢。

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);
  }
};

Answer 2

您的代码似乎运行正常。

 class App extends React.Component{ constructor(props){ super(props); } onCero = (e) => { console.log(e.key); e.preventDefault(); if (e.key === "Delete" || e.key === "Backspace") { alert(e.key); } }; render(){ return( <input type="number" onKeyDown ={((e) => this.onCero(e))} /> ) } } ReactDOM.render( <App/>, document.getElementById("root") ); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="root"></div> 

Answer 3

您可以通过onKeyPress = {this.onCero}进行调用。 这应该工作