如何在ReactJS中处理`onKeyPress`事件？

Question

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

Answer 1

我正在使用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>
     );
}

Answer 2

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

onKeyDown发现了keyCode事件。

Answer 3

对我来说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键盘事件https://facebook.github.io/react/docs/events.html#keyboard-events

Answer 4

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

Answer 5

React并没有传递你可能想到的那种事件。相反，它正在通过synthetic events。

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

Answer 6

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

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

这会打印按下屏幕的确切键。因此，如果您想在div处于焦点时响应所有“a”按下，则将e.key与“a”进行比较 - 字面上是if（e.key ===“a”）。

Answer 7

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

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

希望这有助于某人。 :)

Answer 8

在按键事件方面存在一些挑战。 Jan Wolter's article on key events有点旧，但解释为什么关键事件检测可能很难。

有几点需要注意：

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

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