Javascript 如何处理 ReactJS 中的 `onKeyPress` 事件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27827234/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to handle the `onKeyPress` event in ReactJS?
提问by user544079
How can I make the onKeyPressevent work in ReactJS? It should alert when enter (keyCode=13)is pressed.
如何让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);
回答by Haven
I am working with React 0.14.7, use onKeyPressand event.keyworks well.
我正在使用 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>
);
}
回答by user544079
render: function(){
return(
<div>
<input type="text" id="one" onKeyDown={this.add} />
</div>
);
}
onKeyDowndetects keyCodeevents.
onKeyDown检测keyCode事件。
回答by blackchestnut
For me onKeyPressthe e.keyCodeis always 0, but e.charCodehas correct value. If used onKeyDownthe correct code in e.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>
);
}
});
回答by UserNeD
Keypress event is deprecated, You should use Keydown event instead.
Keypress 事件已弃用，您应该改用 Keydown 事件。
https://developer.mozilla.org/en-US/docs/Web/API/Document/keypress_event
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} />
}
回答by Kiran Chaudhari
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>
);
}
});
回答by Ben
React is not passing you the kind of events you might think. Rather, it is passing synthetic events.
React 不会传递您可能认为的那种事件。相反，它正在传递合成事件。
In a brief test, event.keyCode == 0is always true. What you want is event.charCode
在简短的测试中，event.keyCode == 0始终为真。你想要的是event.charCode
回答by waz
If you wanted to pass a dynamic param through to a function, inside a dynamic input::
如果您想在动态输入中将动态参数传递给函数：
<Input
onKeyPress={(event) => {
if (event.key === "Enter") {
this.doSearch(data.searchParam)
}
}}
placeholder={data.placeholderText} />
/>
Hope this helps someone. :)
希望这可以帮助某人。:)
回答by vbullinger
Late to the party, but I was trying to get this done in TypeScript and came up with this:
聚会迟到了，但我试图在 TypeScript 中完成它并想出了这个：
<div onKeyPress={(e: KeyboardEvent<HTMLDivElement>) => console.log(e.key)}
This prints the exact key pressed to the screen. So if you want to respond to all "a" presses when the div is in focus, you'd compare e.key to "a" - literally if(e.key === "a").
这会将按下的确切键打印到屏幕上。因此，如果您想在 div 处于焦点时响应所有“a”按下，您可以将 e.key 与“a”进行比较——字面意思是 if(e.key === "a")。
回答by David Lin
There are some challenges when it comes to keypress event. Jan Wolter's article on key eventsis a bit old but explains well why key event detection can be hard.
在按键事件方面存在一些挑战。Jan Wolter 关于关键事件的文章有点旧，但很好地解释了为什么关键事件检测会很困难。
A few things to note:
需要注意的几点：
keyCode,which,charCodehave different value/meaning in keypress from keyup and keydown. They are all deprecated, however supported in major browsers.- Operating system, physical keyboards, browsers(versions) could all have impact on key code/values.
keyandcodeare the recent standard. However, they are not well supported by browsers at the time of writing.
keyCode,which,charCode与 keyup 和 keydown 在 keypress 中具有不同的值/含义。它们都已弃用，但在主要浏览器中受支持。- 操作系统、物理键盘、浏览器（版本）都可能对键代码/值产生影响。
key并且code是最近的标准。但是，在撰写本文时，浏览器并没有很好地支持它们。
To tackle keyboard events in react apps, I implemented react-keyboard-event-handler. Please have a look.
为了处理 React 应用程序中的键盘事件，我实现了react-keyboard-event-handler。请看一看。
回答by Eng Mahmoud El Torri
you can check this function "pressEnter"
你可以检查这个功能“pressEnter”
