Question

我有一个关键字搜索文本框，我想在用户按Enter键时运行runSearch功能。但是目前，该事件尚未触发。我的代码如下：

 onkeyPress=(e)=>{
  if(e.key === "Enter" ||e.charCode === 13||e.keyCode === 13){
 console.log('keyword value', this.state.keyword);
 this.runSearch();

 }
}
...
<input  id="search-box" placeholder="Enter a search term..." type="textbox" value={this.state.keyword} onChange={this.onKeywordInputChange} onKeyPress={this.onKeyPress}   />

---------下面的工作代码---- https://reactarmory.com/guides/react-events-cheatsheet

handler=(event)=> {
  console.log("key:", event.key);
    if (event.key==="Enter"){...}
}



<input 
      id="search-box" type="textbox"
      value={this.state.keyword} 
      onChange={this.onKeywordInputChange}
    placeholder='Enter a search term...'

    onKeyPress={this.handler}
   />

Answer 1

确保onKeyPress位于类组件构造函数中：

constructor(props) {
  super(props);
  this.onKeyPress = this.onKeyPress.bind(this);
}

或者您使用

onKeyPress = (e) => {}

或者您使用功能组件并完全省略this

https://codesandbox.io/s/crimson-wood-khmg0

function App() {
  const onKeyPress = e => console.log(e.nativeEvent);
  return (
    <div className="App">
      <input type="text" placeholder="type something" onKeyPress={onKeyPress} />
    </div>
  );
}

Answer 2

我已经更新了工作代码的副本。我不知道为什么旧代码不起作用。

handler=(event)=> {
console.log("key:", event.key);
if (event.key==="Enter"){...}
}



<input 
  id="search-box" type="textbox"
  value={this.state.keyword} 
  onChange={this.onKeywordInputChange}
placeholder='Enter a search term...'

onKeyPress={this.handler}
/>

OnKeyPress不触发

2 个答案: