newICSS/src/components/DiagResultSearch/index.jsx

import React, { Component } from 'react';
import style from './index.less';
import close from './img/close.png'
import search from './img/search.png'
import DiagnosticItem from '@containers/DiagnosticItem'
import config from '@config/index';
import $ from 'jquery';
class DiagResultSearch extends Component {
    constructor(props) {
        super(props);
        this.state = {
            showClose: false,
            focus: true,
            timer:null
        };
        this.searchInput = React.createRef();
        this.handleInput = this.handleInput.bind(this);
        this.clearInput = this.clearInput.bind(this);
        this.handleFocus = this.handleFocus.bind(this);
        this.handleBlur = this.handleBlur.bind(this);

    }
    componentWillReceiveProps(){
        const { searchResult, clearSearchResult } = this.props;
        this.setState({focus: true})
        if( searchResult && searchResult.length > 0) {
            clearSearchResult();//清除上次搜索结果
        }
    }
    componentDidMount () {
        const that = this
        $(document).click(function (e) {
            var diagSearch=$('#diagSearch')[0];
            var addDiag = $('#addDiag')[0];
            var confirm = $('#confirm')[0];
            if(diagSearch) {
                if(confirm) {
                    
                } else {
                    if (e.target!= diagSearch && e.target!= addDiag && e.target.parentNode!= addDiag && !$.contains(diagSearch, e.target) ) {
                        that.setState({
                            showSearch: !that.props.showSearch
                        });
                        that.clearInput()
                        that.props.hideSearch();
                    }


                }
                
            }
            
        })
    }

    handleInput(value) {
        const {  setSearchValue, getSearchResult } = this.props;
        value.length > 0 ? this.setState({showClose: true}) : this.setState({showClose: false});
        clearTimeout(this.state.timer);
        let timer = setTimeout(()=>{
            clearTimeout(this.state.timer);
          if(value.trim() == ''){
            return  getSearchResult('');
          }
          getSearchResult(value.trim());
        },config.delayTime);
        this.setState({
          timer
        });
    }
    clearInput() {
        const {  setSearchValue, getSearchResult } = this.props;
        this.searchInput.current.value = '';
        getSearchResult('');
        this.setState({showClose: false})
    }

    handleFocus() {
        this.setState({focus: true})
    }
    handleBlur() {
        this.setState({focus: false})
    }
   
    render(){
        const { showClose } = this.state
        const  { show, searchResult, getSearchResult } = this.props
        return(
            show && <div id='diagSearch' className={style['search-box']}>
                <div className={style['search']}>
                    <input ref={this.searchInput} 
                        type="text" 
                        placeholder='搜索'
                        onFocus={this.handleFocus}
                        onBlur = {this.handleBlur}
                        className={style['search-input']}   
                        style = {this.state.focus ? {border: '1px solid #3B9ED0'} :{border: '1px solid #979797'}}
                        onInput={(e)=>this.handleInput(e.target.value)}
                        onPropertyChange={(e)=>this.handleInput(e.target.value)} 
                        />
                    <img  className={style['search-img']} src={search} alt="搜索"/>
                    <img className={style['search-close']} onClick={this.clearInput} style={showClose ? '': {display: 'none'}} src={close} alt=""/>
                </div>
                <div className={style['search-result']}>
                    {
                        searchResult && searchResult.map((item) => {
                            return(<div  key={item.id} className={style['search-result-item']}><DiagnosticItem title={true} item={item} clearInput={this.clearInput}/></div>)
                        })
                    }
                </div>
            </div>
        )
    }
}

export default DiagResultSearch;