在React JS中按下输入时如何实现onChange事件[重复]

Posted 2023-02-22

【中文标题】在React JS中按下输入时如何实现onChange事件[重复]

【英文标题】：How to implement onChange event when enter pressed in React JS [duplicate]

【发布时间】：2018-06-13 22:59:42

【问题描述】：

我使用 Spotify API 创建了这个网络应用程序http://jamwithme.surge.sh/，我想实现一个 onEnterPress 功能，以便用户可以按 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;

我的代码现在可以运行了，但有什么方法可以改进它吗？

【参考方案1】：

只需监听 onKeyPress 事件并检查事件的键码是否为 13（Enter 键）。

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

【参考方案2】：

默认情况下，输入与聚焦一起使用。因此，当用户专注于某个元素时，输入会激活它，默认情况下，您可以使用标签索引将用户聚焦在搜索按钮上。 你也可以只为某个组件添加一个事件监听器并检查事件的关键代码——如果它是输入然后做搜索。