加清空按钮

src/components/MedicalInfo/index.jsx

@@ -1,12 +1,19 @@
 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);
     }
     getSearchList() {
         const { getAllConceptDetail,searchResult } = this.props;
@@ -23,14 +30,37 @@ class MedicalInfo extends Component {
       const val = this.$inp.current.value;
       handleChangeValue&&handleChangeValue(val);
     }
+  handleChange(){
+      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']}> 
+        <div className={style['mefical-info-wrapper']} ref={this.$cont}>
             <div className={style['search-cont']}>
                 <p className={style['title']}>医学知识搜索</p>
-                <p>
-                  <input type="text" className={style['input']} ref={this.$inp}/>
+                <p className={style['cont']}>
+                  <input type="text" className={style['input']} ref={this.$inp} onChange={this.handleChange}/>
+                  {val?<img src={delIcon} alt="清空" onClick={this.clear}/>:''}
                   <button onClick={this.search}>搜索</button>
                 </p>
               {searchResult&&searchResult.length>0?<div className={style['result']}>

src/components/MedicalInfo/index.less

@@ -7,6 +7,16 @@
     position: relative;
 }
 .search-cont{
+    .cont{
+        position: relative;
+        img{
+            position: absolute;
+            width: 15px;
+            left: 266px;
+            top: 9px;
+            cursor: pointer;
+        }
+    }
     .title{
         font-size: 12px;
         color:#979797;