javascript - 使用 React 时如何正确地将事件监听器添加到输入

Question

我想向输入添加一个事件列表器，以便当用户专注于输入并按 Enter 时，我选择的函数就会运行。

我知道如何使用常规 javascript 执行此操作，但在 React 文档中找不到正确设置的引用。

JS:

const input = document.getElementById("myInput");

input.addEventListener("keydown", function(e) {
  if (e.keyCode === 13) {
    e.preventDefault()
    this.handleEnterPress
  }
})

react 模型:

class Example extends React.Component {

handleEnterPress = () => {
// some more code here
}

render () {
return(
<input id='myInput'/>
)
}

export default Example

Answer 1

只需使用onKeyUp:

class Example extends React.Component {

handleKeyPress = e => {
  if (e.which === 13) {  // <-- Enter
     // enter code here
  }
}

render () { 
   return ( <input type="text" id='myInput' onKeyUp={handleKeyPress}/> )
}

export default Example

关于关键事件的一些注释，以防万一您将来除了 Enter 之外还关心其他事件:

KeyPress ignores delete, arrows, home/end, ctrl, alt, shift etc while KeyDown and KeyUp don't