如何处理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) => {&nbsp; if(event.key === 'Enter'){&nbsp; &nbsp; console.log('enter press here! ')&nbsp; }}render: function(){&nbsp; &nbsp; &nbsp;return(&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<input type="text" id="one" onKeyPress={this.handleKeyPress} />&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp;);}

Answer 2

render: function(){&nbsp; &nbsp; &nbsp;return(&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<input type="text" id="one" onKeyDown={this.add} />&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp;);}onKeyDown检测keyCode事件。

Answer 3

对我而言onKeyPress，e.keyCode始终是0，但e.charCode具有正确的价值。如果在中使用onKeyDown了正确的代码e.charCode。var Title = React.createClass({&nbsp; &nbsp; handleTest: function(e) {&nbsp; &nbsp; &nbsp; if (e.charCode == 13) {&nbsp; &nbsp; &nbsp; &nbsp; alert('Enter... (KeyPress, use charCode)');&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; if (e.keyCode == 13) {&nbsp; &nbsp; &nbsp; &nbsp; alert('Enter... (KeyDown, use keyCode)');&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; },&nbsp; &nbsp; render: function() {&nbsp; &nbsp; &nbsp; return(&nbsp; &nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <textarea onKeyPress={this.handleTest} />&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; }&nbsp; });