如何处理' onKeyPress '事件在ReactJS?

如何使onKeyPress事件在ReactJS中工作?当enter (keyCode=13)被按下时，它应该发出警报。

var Test = React.createClass({
add: function(event){
if(event.keyCode == 13){
alert('Adding....');
}
},
render: function(){
return(
<div>
<input type="text" id="one" onKeyPress={this.add} />
</div>
);
}
});


React.render(<Test />, document.body);
625789 次浏览
小开 
render: function(){
return(
<div>
<input type="text" id="one" onKeyDown={this.add} />
</div>
);
}

onKeyDown检测keyCode事件。

小开

React不会传递给您您可能认为的那种事件。相反，它正在传递合成事件。

在一个简短的测试中，event.keyCode == 0总是为真。你想要的是event.charCode

小开

对我来说，onKeyPress的e.keyCode总是0，但e.charCode有正确的值。如果使用onKeyDown，则e.charCode中的正确代码。

var Title = React.createClass({
handleTest: function(e) {
if (e.charCode == 13) {
alert('Enter... (KeyPress, use charCode)');
}
if (e.keyCode == 13) {
alert('Enter... (KeyDown, use keyCode)');
}
},
render: function() {
return(
<div>
<textarea onKeyPress={this.handleTest} />
</div>
);
}
});

反应键盘事件。

小开

我正在使用React 0.14.7，使用onKeyPress和event.key工作良好。

handleKeyPress = (event) => {
if(event.key === 'Enter'){
console.log('enter press here! ')
}
}
render: function(){
return(
<div>
<input type="text" id="one" onKeyPress={this.handleKeyPress} />
</div>
);
}
小开

来晚了，但我试图在TypeScript中完成这个，并想出了这个:

<div onKeyPress={(e: KeyboardEvent<HTMLDivElement>) => console.log(e.key)}

这将打印按到屏幕上的精确键。因此，如果你想在div聚焦时响应所有的“a”键，你可以将e.key与“a”进行比较——字面意思是if(e。Key === "a")。

小开

如果你想把一个动态参数传递给一个函数，在一个动态输入中::

<Input
onKeyPress={(event) => {
if (event.key === "Enter") {
this.doSearch(data.searchParam)
}
}}
placeholder={data.placeholderText} />
/>

希望这能帮助到一些人。：）

小开

有一些挑战，当涉及到按键事件。简·沃尔特关于关键事件的文章有点老了，但很好地解释了为什么关键事件检测很难。

有几件事需要注意:

  1. keyCode， which， charCode在键盘上的值/含义与keyup和keydown不同。它们都被弃用了，但在主流浏览器中是受支持的。
  2. 操作系统、物理键盘、浏览器(版本)都可能对键代码/值产生影响。
  3. key和code是最近的标准。但是，在撰写本文时，浏览器还没有很好地支持它们。

为了解决react应用程序中的键盘事件，我实现了react-keyboard-event-handler。请看一看。

小开 
var Test = React.createClass({
add: function(event){
if(event.key === 'Enter'){
alert('Adding....');
}
},
render: function(){
return(
<div>
<input type="text" id="one" onKeyPress={(event) => this.add(event)}/>
</div>
);
}
});
小开

Keypress事件已弃用，您应该使用Keydown事件代替。

https://developer.mozilla.org/en-US/docs/Web/API/Document/keypress_event

handleKeyDown(event) {
if(event.keyCode === 13) {
console.log('Enter key pressed')
}
}


render() {
return <input type="text" onKeyDown={this.handleKeyDown} />
}
小开
你需要在你的keyPress事件上调用event.persist ();这个方法。 例子:< / p > 
const MyComponent = (props) => {
const keyboardEvents = (event) =>{
event.persist();
console.log(event.key); // this will return string of key name like 'Enter'
}
return(
<div onKeyPress={keyboardEvents}></div>
)
}

如果你现在在keyboardEvents函数中输入console.log(event)，你会得到其他属性，比如:

keyCode // number
charCode // number
shiftKey // boolean
ctrlKey // boolean
altKey // boolean

还有很多其他属性

谢谢,问候

p.s.: React版本:16.13.1

小开

通过访问window元素，这对我来说是有效的

useEffect(() => {
window.addEventListener('keypress', e => {
console.log(e.key)
});
}, []);

提交答案