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

【问题标题】：How to implement onChange event when enter pressed in React JS [duplicate]在React JS中按下输入时如何实现onChange事件[重复]
【发布时间】：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;

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

【问题讨论】：

标签： javascript reactjs

【解决方案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】：

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

【讨论】：