newICSS/src/components/MedicalInfo/index.jsx

import React, { Component } from 'react';
import style from './index.less';
import delIcon from '@common/images/del_nor.png';
import {windowEventHandler,getCurrentDate,getWindowInnerHeight} from '@utils/tools'

class MedicalInfo extends Component {
    constructor(props) {
        super(props);
        this.$inp = React.createRef();
        this.$cont = React.createRef();
        this.state={
          val:''
        };
        this.search = this.search.bind(this);
        this.handleChange = this.handleChange.bind(this);
        this.clear = this.clear.bind(this);
        this.getSearchList = this.getSearchList.bind(this);
    }
    getSearchList() {
        const { getAllConceptDetail,searchResult } = this.props;
        return searchResult && searchResult.map((item) => {
                return <li key={item.conceptId} onClick={() =>getAllConceptDetail({name: item.name, type: item.type})}>
                            <span>{item.name}</span>
                            <i>( {item.libTypeName} )</i>
                            <button>查看</button>
                        </li>;
            });
    }
    search(){
      const {handleChangeValue} = this.props;
      const val = this.$inp.current.value;
      handleChangeValue&&handleChangeValue(val);
    }
  handleChange(){
      console.log('change')
      this.setState({
        val:this.$inp.current.value
      });
  }
  clear(){
    this.$inp.current.value = '';
    this.setState({
      val:''
    });
  }
  componentDidMount(){
    const height = getWindowInnerHeight()-170;
    this.$cont.current.style.height = height+"px";
    if(this.$cont.current){
      windowEventHandler('resize', ()=>{
        const height = getWindowInnerHeight()-170;
        this.$cont.current.style.height = height+"px";
      });
    }
  }
    render() {
        const {searchResult} = this.props;
        const {val} = this.state;
        return (
        <div className={style['mefical-info-wrapper']} ref={this.$cont}>
            <div className={style['search-cont']}>
                <p className={style['title']}>医学知识搜索</p>
                <p className={style['cont']}>
                  <input type="text" className={style['input']} ref={this.$inp} />
                  {val?<img src={delIcon} alt="清空" onClick={this.clear}/>:''}
                  <button onClick={this.search}>搜索</button>
                </p>
              {searchResult&&searchResult.length>0?<div className={style['result']}>
                    <p className={style['title']}>查询内容</p>
                    <ul>
                      {this.getSearchList()}
                    </ul>
              </div>:<p className={style['no-data']}>暂无搜索结果！</p>}
             </div>
        </div>
        
        )

        
        
    }
}

export default MedicalInfo;