Question

我想向输入添加事件列表器，以便当用户将注意力集中在输入上并按Enter时，将运行我选择的功能。

我知道如何使用常规javascript做到这一点，但是在React文档中找不到对正确设置的引用。

JS：

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

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

反应样机：

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 会在删除，箭头，起始/结束，Ctrl，Alt，Shift等时忽略 KeyDown 和 KeyUp 不

Answer 2

尝试这样的事情：

handleKeyPress = (event) => {
   if(event.key == 'Enter'){
   console.log('enter press here! ')
  }
 }

 class SomeComponent  extends Component {
 render () {
   return(
     <div>
       <input type="text"  onKeyPress={this.handleKeyPress} />
    </div>
  }

使用React时如何正确地将事件列表添加到输入

2 个答案: