如何处理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>

      );

    }

  });