searchHead.js

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

import './search_header.scss'

class SearchHead extends PureComponent {
    
    state = {
        isFocus: false
    }

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

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

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

    storeKeyword = () => {
        const {searchHistory = [], value} = this.props;
        const data = searchHistory.some(item =>item === value)? searchHistory : searchHistory.concat([value]);
        // value && localStorage.setItem('searchHistory', JSON.stringify([...searchHistory, value]))
        localStorage.setItem('searchHistory', JSON.stringify(data));
    }

    changeFontColor = (isFocus) => {
        this.setState({
            isFocus
        });
    }

    render() {
        const { isFocus } = this.state;
        const cls = classnames('submit-btn', {'submit-btn--active': isFocus})
        return (
            <div className="search-head" style={this.props.style} ref={this.props.forwardedRef}>

                <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="搜索课程"
                        onFocus={() => this.changeFontColor(true)}
                        onBlur={() => this.changeFontColor(false)}
                        onSubmit={ this.search }
                    />
                </div>
                <div className="right right-btn" onClick={this.search}>
                    <div className={cls}>搜索</div>
                </div>
            </div>

        )
    }
}

export default withRouter(SearchHead)