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 &&
this.handleInput(e.target.value)} onPropertyChange={(e)=>this.handleInput(e.target.value)} /> 搜索
{ searchResult && searchResult.map((item) => { return(
) }) }
) } } export default DiagResultSearch;