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}进行调用。这应该起作用

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

3 个答案: