如何在react中处理onKeyPress事件

• Z时代
• 2024-01-10
• 分类：综合

参考：https://stackoverflow.com/questions/27827234/how-to-handle-the-onkeypress-event-in-reactjs

以前过时的做法：使用keyCode

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

现在建议的做法：使用语义化的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>
     );
}

以上是 如何在react中处理onKeyPress事件 的全部内容， 来源链接： utcz.com/z/509488.html