如何处理ReactJS中的onKeyPress事件?


214

如何使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);

15
v0.11开始, React将键控代码标准化为可读的字符串。我建议使用那些代替keyCodes。
兰迪·莫里斯

@RandyMorris react并不总是正确地规范键代码。对于产生“ +”,将为您提供键代码值187(shiftKey = true),但是“键”值将解析为“未识别”。
Herr

Answers:


224

我正在使用React 0.14.7,使用onKeyPressevent.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>
     );
}

17
:你可以在测试中,它simutate它Simulate.keyPress(ReactDOM.findDOMNode(component.refs.input),{key:"Enter"});
维尔托德

2
你说实验是什么意思?我认为使用ES6“ functionName(param)=> {}”会起作用吗?
Waltari

4
@Waltari这是ES6 箭头函数,表示function handleKeyPress(event){...}
Haven

2
它还具有约束力this
bhathiya-perera '18

4
也许这很花哨,但值得注意的是,最好使用严格的相等===检查event.key == 'Enter'
亚历山大·尼德

52
render: function(){
     return(
         <div>
           <input type="text" id="one" onKeyDown={this.add} />
        </div>
     );
}

onKeyDown检测keyCode事件。


11
通常,通过onKeyUp检测到回车键的情况-如果用户愿意,这可以使用户停止交互。使用keyPress或keyDown会立即执行。
Andreas

51

对我而言onKeyPresse.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>
      );
    }
  });

反应键盘事件


9
..so,如果您对使用箭头键和/或其他非字母数字键感兴趣,那么onKeyDown适合您,因为它们不会返回keyChar而是keyCode。
oskare '16

3
对于那些有兴趣亲自尝试React keyEvent的人,这是我创建的codeandbox
AlienKevin


10

React不会给您传递您可能会想到的那种事件。相反,它正在传递综合事件

在简短的测试中,event.keyCode == 0永远都是正确的。你想要的是event.charCode


但是,这并不影响问题。按下Enter键时,不会更改等于13的keyCode。
龙舌兰酒'19

1
我只是继续获得合成函数e.key || e.keyCode || e.charCode
chovy

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

9

如果要将动态参数传递给函数,请在动态输入内部:

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

希望这对某人有帮助。:)


7

晚了聚会,但是我试图在TypeScript中完成此工作并提出了以下建议:

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

这将在屏幕上打印出确切的键。因此,如果要在div处于焦点状态时响应所有“ a”按下,则可以将e.key与“ a”进行比较-字面是if(e.key ===“ a”)。



5

按键事件方面存在一些挑战。扬·沃尔特(Jan Wolter)关于关键事件的文章有些陈旧,但是很好地解释了为什么很难检测关键事件。

注意事项:

  1. keyCodewhichcharCode具有不同的值/从KEYUP和KEYDOWN在按键的意思。它们均已弃用,但在主要浏览器中受支持。
  2. 操作系统,物理键盘,浏览器(版本)都可能对键代码/值产生影响。
  3. key并且code是最新标准。但是,在撰写本文时,浏览器还没有很好地支持它们。

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


By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.