|
@@ -8,7 +8,6 @@ class MedicalInfo extends Component {
|
|
super(props);
|
|
super(props);
|
|
this.$inp = React.createRef();
|
|
this.$inp = React.createRef();
|
|
this.$cont = React.createRef();
|
|
this.$cont = React.createRef();
|
|
- this.$contList = React.createRef();
|
|
|
|
this.state={
|
|
this.state={
|
|
val:''
|
|
val:''
|
|
};
|
|
};
|
|
@@ -16,6 +15,7 @@ class MedicalInfo extends Component {
|
|
this.handleChange = this.handleChange.bind(this);
|
|
this.handleChange = this.handleChange.bind(this);
|
|
this.clear = this.clear.bind(this);
|
|
this.clear = this.clear.bind(this);
|
|
this.getSearchList = this.getSearchList.bind(this);
|
|
this.getSearchList = this.getSearchList.bind(this);
|
|
|
|
+ this.handleEnter = this.handleEnter.bind(this);
|
|
}
|
|
}
|
|
getSearchList() {
|
|
getSearchList() {
|
|
const { getAllConceptDetail,searchResult } = this.props;
|
|
const { getAllConceptDetail,searchResult } = this.props;
|
|
@@ -37,6 +37,11 @@ class MedicalInfo extends Component {
|
|
val:this.$inp.current.value
|
|
val:this.$inp.current.value
|
|
});
|
|
});
|
|
}
|
|
}
|
|
|
|
+ handleEnter(e){
|
|
|
|
+ if(e.keyCode==13){
|
|
|
|
+ this.search();
|
|
|
|
+ }
|
|
|
|
+ }
|
|
clear(){
|
|
clear(){
|
|
this.$inp.current.value = '';
|
|
this.$inp.current.value = '';
|
|
this.setState({
|
|
this.setState({
|
|
@@ -44,14 +49,12 @@ class MedicalInfo extends Component {
|
|
});
|
|
});
|
|
}
|
|
}
|
|
componentDidMount(){
|
|
componentDidMount(){
|
|
- const height = getWindowInnerHeight()-234;
|
|
|
|
|
|
+ const height = getWindowInnerHeight()-170;
|
|
this.$cont.current.style.height = height+"px";
|
|
this.$cont.current.style.height = height+"px";
|
|
- this.$contList.current.style.height = height-30+"px";
|
|
|
|
if(this.$cont.current){
|
|
if(this.$cont.current){
|
|
windowEventHandler('resize', ()=>{
|
|
windowEventHandler('resize', ()=>{
|
|
- const height = getWindowInnerHeight()-234;
|
|
|
|
|
|
+ const height = getWindowInnerHeight()-170;
|
|
this.$cont.current.style.height = height+"px";
|
|
this.$cont.current.style.height = height+"px";
|
|
- this.$contList.current.style.height = height-30+"px";
|
|
|
|
});
|
|
});
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@@ -59,27 +62,24 @@ class MedicalInfo extends Component {
|
|
const {searchResult} = this.props;
|
|
const {searchResult} = this.props;
|
|
const {val} = this.state;
|
|
const {val} = this.state;
|
|
return (
|
|
return (
|
|
- <div className={style['mefical-info-wrapper']}>
|
|
|
|
- <div className={style['search-cont']}>
|
|
|
|
|
|
+ <div className={style['search-cont']} ref={this.$cont}>
|
|
|
|
+ <div className={style['search-box']}>
|
|
<p className={style['title']}>医学知识搜索</p>
|
|
<p className={style['title']}>医学知识搜索</p>
|
|
<p className={style['cont']}>
|
|
<p className={style['cont']}>
|
|
- <input type="text" className={style['input']} ref={this.$inp} onInput={this.handleChange}/>
|
|
|
|
|
|
+ <input type="text" className={style['input']} ref={this.$inp} onInput={this.handleChange} onKeyUp={this.handleEnter}/>
|
|
{val?<img src={delIcon} alt="清空" onClick={this.clear}/>:''}
|
|
{val?<img src={delIcon} alt="清空" onClick={this.clear}/>:''}
|
|
<button onClick={this.search}>搜索</button>
|
|
<button onClick={this.search}>搜索</button>
|
|
</p>
|
|
</p>
|
|
- <div className={style['result-box']} ref={this.$cont}>
|
|
|
|
- <div className={style['result']} style={searchResult&&searchResult.length>0? {'display': 'block'} : {'display': 'none'}}>
|
|
|
|
- <p className={style['title']}>查询内容</p>
|
|
|
|
- <ul className={style['result-list']} ref={this.$contList}>
|
|
|
|
- {this.getSearchList()}
|
|
|
|
- </ul>
|
|
|
|
- </div>
|
|
|
|
- <p className={style['no-data']} style={searchResult&&searchResult.length>0? {'display': 'none'} : {'display': 'block'}}>暂无搜索结果!</p>
|
|
|
|
- </div>
|
|
|
|
-
|
|
|
|
|
|
+ </div>
|
|
|
|
+ {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>
|
|
- </div>
|
|
|
|
-
|
|
|
|
|
|
+
|
|
|
|
+
|
|
)
|
|
)
|
|
|
|
|
|
|
|
|