How do I give users the ability to press “Enter” to search using react?

Question

I want to add the ability to search by clicking ENTER key. How can I add that in my code? This is from a codecademy project

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

class SearchBar extends Component {
    constructor(props) {
        super(props);
        this.search = this.search.bind(this);
        this.handleTermChange = this.handleTermChange.bind(this);
      }

      handleTermChange(event) {
        const newTerm = event.target.value;
        this.setState = ({ term: newTerm});
      }

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

    render() {
        return(
        <div className="SearchBar">
            <input placeholder="Enter A Song, Album, or Artist" onChange = {this.handleTermChange}/>
            <a onClick ={this.search}>SEARCH</a>
        </div>
        )}
}

export default SearchBar;

https://stackoverflow.com/q/31272207 – Vega Jun 10 '18 at 12:07 — Vega, Jun 10 '18 at 12:07

score 4 · Answer 1 · answered Jun 10 '18 at 12:31

React implements the onKeyUp method for inputs

 <input placeholder="Enter A Song, Album, or Artist" onChange={this.handleTermChange} onKeyUp={this.handleKeyPress.bind(this)}/>

And create a method in your component:

handleKeyPress(e) {
    if (e.key === 'Enter') {
        this.search(); 
    }
}

How do I give users the ability to press “Enter” to search using react?

1 Answers1