49 lines
1.2 KiB
JavaScript
49 lines
1.2 KiB
JavaScript
import React, { Component } from 'react';
|
|
import { observer } from 'mobx-react';
|
|
import './SearchBar.css';
|
|
|
|
import { DataStore } from '../DataStore';
|
|
|
|
@observer
|
|
class SearchBar extends Component {
|
|
|
|
state = {
|
|
value:''
|
|
}
|
|
|
|
onClickBtn = () => {
|
|
if(this.state.value) {
|
|
DataStore.keyword = this.state.value;
|
|
DataStore.page = 1;
|
|
DataStore.searchSongListStore();
|
|
}else{
|
|
DataStore.keyword = '';
|
|
DataStore.page = 0;
|
|
DataStore.newSongListStore();
|
|
}
|
|
}
|
|
|
|
onTextChange = (event) => {
|
|
this.setState({
|
|
value: event.target.value
|
|
});
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<div className="search-box">
|
|
<div className="search-input">
|
|
<input type="text" placeholder="搜索歌曲或歌手"
|
|
value={this.state.value}
|
|
onChange={this.onTextChange} />
|
|
</div>
|
|
<div className="search-btn">
|
|
<button className="iconfont icon-search"
|
|
onClick={this.onClickBtn}></button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default SearchBar; |