init glass player

src/components/SearchBar.js

@@ -0,0 +1,49 @@
+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;