KeyJs中的KeyPress事件处理

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

我如何使KeyPress事件在React JS中工作。 当enter (keyCode=13)被按下时，它应该会enter (keyCode=13)警报。

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

React并没有传递给你可能想到的事件。 而是通过合成事件 。

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