如何在使用React时检测按下“Enter”键的keyPress事件

Question

我正在使用ReactJs开发我的应用程序。我尝试通过处理onKeyPress事件在按下Enter键时提交输入文本。它可以检测到其他输入，但不能检测到Enter键。我尝试了不同的方法-event.key、event.charCode、event.keyCode、event.which... 但似乎没有什么效果。

React.createElement("input", {tabIndex: "1", onKeyPress: this.handleKeyPress, onChange: this.handleChange, 
                           placeholder: "ex: 1,10,15"}), 

handleChange: function (event) {
        this.setState({userInputBuckets: event.target.value});
    },
handleKeyPress: function (event) {
        if (event.charCode == 13) {
            event.preventDefault();
            this.props.table.handleSubtotalBy(this.props.columnDef, this.state.userInputBuckets);
        }
    },

我还尝试了使用onKeyDown处理，它可以检测到正确的按键，但即使它将event.keyCode == 13评估为true，它也不会执行if块。

- saumj

---

这个输入是在表单中创建的吗？它可能会触发提交事件而不是按键事件。你尝试过使用keyDown事件并查看它是否可以捕获按键动作了吗？ - Deadron

是的，我也尝试使用onKeyDown。在评估条件为真后，它将绕过if块。 - saumj

即使它将 event.keyCode == 13 表达式评估为 true，但它并不执行 if 块。这不对，除非你使用的是一个非常有 bug 的 JS 引擎。很可能是内部代码抛出了一个错误。 - joews

我尝试了一遍。它执行了代码块，但在另一个地方 event 未定义时，在 event.stopPropogation() 处出现错误。 - saumj

好的。你需要发布代码的那部分才能得到帮助。 - joews

function ReactTableHandleSubtotalBy(columnDef, partitions, event) { event.stopPropagation(); const subtotalBy = this.state.subtotalBy || []; ... }当调用handleSubtotalBy时，会调用此功能。 - saumj

Answer 1

将 e.stopPropagataion 从 handleSubtotalBy 移动到 handleKeyPress 中：

handleKeyPress(event) {
  if (event.charCode == 13) {
    event.preventDefault();
    event.stopPropagation();
    this.props.table.handleSubtotalBy(this.props.columnDef, this.state.userInputBuckets);
  }
}


handleSubtotalBy(columnDef, partitions) { 
  const subtotalBy = this.state.subtotalBy || [];
  // ...
}

- joews

---

谢谢！那很有帮助。 - saumj

对于其他遇到同样问题的人，我不得不使用 onKeyDown 而不是 onKeyPress。 - saumj

Answer 2

"Given answer"不完整，使用以下代码可以检测React中的回车键：

答案

var code = event.keyCode || event.charCode

支持所有浏览器：

除此之外，给出的答案是正确的。复制即可。

- Shishir Arora