53 lines
923 B
JavaScript
53 lines
923 B
JavaScript
import React from 'react';
|
|
|
|
class SearchBar extends React.Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
searchTerm: '',
|
|
};
|
|
this.handleInputChange = this.handleInputChange.bind(this);
|
|
this.handleKeyPress = this.handleKeyPress.bind(this);
|
|
}
|
|
|
|
handleInputChange(event) {
|
|
this.setState({
|
|
searchTerm: event.target.value,
|
|
});
|
|
}
|
|
|
|
handleKeyPress(event) {
|
|
if (event.key === 'Enter') {
|
|
this.props.getAlbums(this.state.searchTerm);
|
|
}
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<div style={SearchBar.styles.div}>
|
|
<h3>Search for an Artist</h3>
|
|
<input
|
|
onChange={this.handleInputChange}
|
|
onKeyPress={this.handleKeyPress}
|
|
style={SearchBar.styles.input}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
SearchBar.propTypes = {
|
|
getAlbums: React.PropTypes.func.isRequired,
|
|
};
|
|
|
|
SearchBar.styles = {
|
|
div: {
|
|
margin: 30,
|
|
textAlign: 'center',
|
|
},
|
|
input: {
|
|
width: '60%',
|
|
},
|
|
};
|
|
|
|
export default SearchBar; |