如何在文本输入框上按下回车键时触发一个函数（React）
在React中，如果我们想要通过在文本输入框上按下Enter键来触发一个函数，我们需要使用键盘事件来实现。然而，有些人在使用onKeyPress事件时遇到了问题，即e.keyCode始终为0，而e.charCode具有正确的值。如果使用onKeyDown事件，则e.charCode中的代码是正确的。
以下是一个示例代码，演示了如何通过按下Enter键来触发一个函数：
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(
);
}
});
在这个示例中，我们创建了一个名为Title的React组件，其中包含一个文本输入框。当用户在文本输入框中按下Enter键时，handleTest函数将被触发。在handleTest函数中，我们使用了两个条件语句来检查按下的键是否是Enter键，如果是，则弹出一个提示框。
对于那些想要尝试使用React键盘事件的人，可以在这里找到一个我创建的codesandbox链接：codesandbox。
，在React中，我们可以通过使用onKeyPress或onKeyDown事件来监听键盘按键。如果我们只对字母数字键感兴趣，可以使用onKeyPress事件并通过e.charCode来获取键码。如果我们还对箭头键等非字母数字键感兴趣，可以使用onKeyDown事件并通过e.keyCode来获取键码。希望这篇文章对你理解如何通过按下Enter键来触发函数在React中的实现方法有所帮助。
在React中，如何通过按下回车键来触发一个函数？
问题的原因是作者在React 0.14.7版本中使用了onKeyPress和event.key，并且它们运行良好。作者创建了一个叫做handleKeyPress的函数，当按下回车键时会在控制台输出一条信息。在render方法中，作者将这个函数绑定到一个输入框的onKeyPress事件上。
为了验证这个函数是否正常工作，作者使用了一个测试方法：Simulate.keyPress(ReactDOM.findDOMNode(component.refs.input),{key:"Enter"});
但是，读者对于handleKeyPress函数声明中的奇怪语法感到困惑，特别是函数名和参数之间的等号。读者以为在ES6中，functionName(param) => {} 这样的写法也是有效的。
实际上，这是ES6的箭头函数语法，它的作用和function handleKeyPress(event){...}是一样的。除此之外，箭头函数还会绑定this的值。
另外值得注意的是，使用严格相等运算符===来检查event.key == 'Enter'会更好。
因此，解决这个问题的方法是在React的组件中使用onKeyPress事件，并在事件处理函数中使用箭头函数语法来绑定函数的执行。同时，注意使用严格相等运算符来进行判断。
handleKeyPress = (event) => {
if(event.key === 'Enter'){
console.log('enter press here! ')
}
}
render: function(){
return(
);
}
如果要在测试中模拟按下回车键，可以使用以下代码：
Simulate.keyPress(ReactDOM.findDOMNode(component.refs.input),{key:"Enter"});
以上就是解决这个问题的原因和方法。