newICSS/src/components/DiagResultSearch/index.jsx

import React, { Component } from 'react';
import style from './index.less';
import DiagnosticItem from '@containers/DiagnosticItem'
import { SearchOption } from '@commonComp';
import ScrollArea from 'react-scrollbar';
import $ from 'jquery';
class DiagResultSearch extends Component {
  constructor(props) {
    super(props);
    this.state = {

    };

    this.getSearchList = this.getSearchList.bind(this)

  }
  componentWillReceiveProps(nextProps) {
  }
  componentDidMount() {
    const that = this
    $(document).click(function (e) {
      var diagSearch = $('#diagSearch')[0];
      var addDiag = $('#addDiag')[0];
      var confirm = $('#confirm')[0];
      if (diagSearch) {
        if (!confirm&&!that.isBar) {//onMousedown的目标为滚动条时，删除弹窗不关闭
          if (e.target != diagSearch && e.target != addDiag && e.target.parentNode != addDiag && !$.contains(diagSearch, e.target)) {
            that.props.hideSearch();
            that.props.setHighter(48)
          }
        }
      }
    });
    document.addEventListener('mousedown',function(e){
      //onMousedown的目标为滚动条时，标签填写单不关闭
      if(e.target.className=='scrollbar'){
        that.isBar = true;
      }else{
        that.isBar = false;
      }
    });
  }

  getSearchList(searchResult) {
    return <div className={style['search-result']}>
      {
        searchResult && searchResult.map((item) => {
          return (<div key={item.id} className={style['search-result-item']}>
            <DiagnosticItem setHighter={this.props.setHighter} title={true} item={item} clearInput={this.clearInput} type='search'/>
          </div>)
        })
      }
    </div>
  }

  render() {
    const { show, searchResult, refreshScroller, handleChangeValue,pageTop,windowHeight } = this.props;

    const contStyle={
      opacity:'0.4',
      right:'0',
      top:'1px',
      zIndex:'15',
      width:'14px',
      background:'#f1f1f1'};
    const barStyle={background:'#777',width:'100%'};
    return (
      show && <div id='diagSearch' className={style['search-box']}>
        <SearchOption handleChangeValue={handleChangeValue} refreshScroller={refreshScroller} pageTop={pageTop} windowHeight={windowHeight} height={180} visible={true}>
          <ScrollArea speed={0.8}
                      horizontal={false}
                      stopScrollPropagation={searchResult.length>6?true:false}
                      style={{height:'257px'}}
                      className={style["area"]}
                      verticalContainerStyle={contStyle}
                      verticalScrollbarStyle={barStyle}
                      contentClassName="content">
          {this.getSearchList(searchResult)}
          </ScrollArea>
        </SearchOption>
      </div>
    )


  }
}

export default DiagResultSearch;