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;

stackoverflow.com/q/31272207

Vega
– Vega

2018-06-10 12:07:56 +00:00
Commented Jun 10, 2018 at 12:07 — Vega
– Vega, Commented Jun 10, 2018 at 12:07

Raul Rene · Accepted Answer · 2018-06-10 12:31:36Z

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(); } }

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related