Question

我使用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;

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

Answer 1

只需听取onKeyPress事件并检查事件的键码是否为13（输入密钥）。

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
}

Answer 2

默认输入用于聚焦。因此，当用户专注于某些元素时，输入将激活它，您可以使用选项卡索引将用户专注于搜索按钮。您还可以向某个组件添加一个事件监听器，并检查事件的密钥代码 - 如果已输入，则执行搜索。

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

2 个答案: