searchHead.js

import React, { PureComponent } from 'react'
import { SearchBar } from 'antd-mobile'
import { withRouter } from 'react-router-dom'

import './search_header.scss'

class SearchHead extends PureComponent {

    returnPage = () => {
        this.props.history.go(-1)
    }

    componentDidMount() {
        this.refs.search.focus();
    }

    search = () => {
        this.storeKeyword()
        this.props.handleSearch()
    }

    storeKeyword = () => {
        let {searchHistory = [], value} = this.props
        value && localStorage.setItem('searchHistory', JSON.stringify([...searchHistory, value]))
    }


    render() {
        return (
            <div className="search-head">

                <div className="left" onClick={this.returnPage}>
                    <i className="iconfont iconiconfront-68"/>
                </div>

                <div className="center">
                    <SearchBar
                        value={this.props.value}
                        showCancelButton
                        cancelText={" "}
                        ref="search"
                        focus={true}
                        onChange={this.props.handleChange}
                        placeholder="搜索课程"/>
                </div>
                <div className="right right-btn" onClick={this.search}>
                    <div className="submit-btn">搜索
                    </div>
                </div>
            </div>
        )
    }
}

export default withRouter(SearchHead)