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, isShowNoDataInfo) {
    // console.log(searchResult,'searchResult');
    // console.log(isShowNoDataInfo,'isShowNoDataInfo');
    if (isShowNoDataInfo === true && searchResult.length === 0 ){
      return <div className={style['search-result-noItem']}>暂无筛选项</div>
    }
    return <div className={style['search-result']} style={{'min-height':'120px',width:'412px',overflow:'auto'}}>
      {
        searchResult.length !== 0  && searchResult.map((item,idx) => {
          return (<div key={idx} 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, isShowNoDataInfo } = 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}>
            {this.getSearchList(searchResult, isShowNoDataInfo)}
        </SearchOption>
      </div>
    )


  }
}

export default DiagResultSearch;