Javascript 如何在React JS中按enter键时实现onChange事件

我使用Spotify API创建了这个web应用程序，我想实现一个OneEnterprise功能，这样用户就可以按enter键搜索曲目。但我不知道从哪里开始

import React, { Component } from "react";
import "./SearchBar.css";


// Search Bar for users to search tracks on spotify
class SearchBar extends Component {
constructor(props) {
super(props);
this.state = { term: '' };
this.search = this.search.bind(this);
this.handleTermChange = this.handleTermChange.bind(this);
this.onKeyPressHandler = this.onKeyPressHandler.bind(this);
}

onKeyPressHandler(event) {
if (event.keyCode === 13) {
  this.props.onSearch(this.state.term);
 }
 }

 search() {
 this.props.onSearch(this.state.term);
 }

 handleTermChange(event) {
 this.setState({term: event.target.value});
 }
 render() {
 return (
  <div className="SearchBar">
    <input placeholder="Enter a Song, Album, or Artist" 
    onChange={this.handleTermChange}
    onKeyDown={this.onKeyPressHandler}
    />
    <a onClick={this.search} >Search</a>
     </div>);}}

export default SearchBar;

import React，{Component}来自“React”；
导入“/SearchBar.css”；
//用于用户在spotify上搜索曲目的搜索栏
类搜索栏扩展组件{
建造师（道具）{
超级（道具）；
this.state={term:'}；
this.search=this.search.bind（this）；
this.handleTermChange=this.handleTermChange.bind（this）；
this.onKeyPressHandler=this.onKeyPressHandler.bind（this）；
}
onKeyPressHandler（事件）{
如果（event.keyCode===13）{
this.props.onSearch（this.state.term）；
}
}
搜索（）{
this.props.onSearch（this.state.term）；
}
handleTermChange（事件）{
this.setState（{term:event.target.value}）；
}
render（）{
返回(
搜寻
);}}
导出默认搜索栏；

---

这里是我的代码，它现在可以工作了，但是有什么方法可以改进它吗？

默认情况下，输入与对焦一起使用。所以，当用户关注某个元素时，enter将激活它，默认情况下，您可以使用tab index将用户的注意力集中在搜索按钮上。

---

此外，您还可以将事件侦听器添加到某些组件中，并检查事件的关键代码-如果是enter，则执行搜索。

默认情况下，enter与聚焦一起使用。所以，当用户关注某个元素时，enter将激活它，默认情况下，您可以使用tab index将用户的注意力集中在搜索按钮上。

---

此外，您还可以将事件侦听器添加到某个组件，并检查事件的键代码-如果是enter，则执行搜索。

只需侦听

onKeyPress

事件，并检查事件的键代码是否为13（输入键）

构造函数（道具）{
超级（道具）；
this.onKeyPressHandler=this.onKeyPressHandler.bind（this）；//如果要在处理程序中使用'this'（可能设置状态或其他）
}
onKeyPressHandler（事件）{
如果（event.keyCode===13）{
//在这里做点什么[按enter键]
}
}
render（）{
返回//搜索栏
}

只需聆听

onKeyPress

事件，并检查事件的keycode是否为13（回车键）

构造函数（道具）{
超级（道具）；
this.onKeyPressHandler=this.onKeyPressHandler.bind（this）；//如果要在处理程序中使用'this'（可能设置状态或其他）
}
onKeyPressHandler（事件）{
如果（event.keyCode===13）{
//在这里做点什么[按enter键]
}
}
render（）{
返回//搜索栏
}

constructor(props) {
  super(props);
  this.onKeyPressHandler = this.onKeypressHandler.bind(this); // if you want to use `this` in the handler (maybe set a state or something)
}

onKeyPressHandler(event) {
  if (event.keyCode === 13) {
    // do something here [enter pressed]
  }
}

render() {
  return <input type="text" onKeyPress={this.onKeyPressHandler}> // search bar
}