Browse Source

先处理搜索选中逻辑

liucf 5 years ago
parent
commit
c29feeaf12
2 changed files with 30 additions and 21 deletions
  1. 22 16
      src/common/components/SearchBox/index.jsx
  2. 8 5
      src/components/SpreadDrop/index.jsx

+ 22 - 16
src/common/components/SearchBox/index.jsx

@@ -16,10 +16,10 @@ class SearchBox extends React.Component {
     constructor(props) {
         super(props);
         this.state = {
-            showBox:false, //显示搜索结果
-            border:'',
-            showClear:false, //显示清空icon
-            timer:null,
+          showBox:false, //显示搜索结果
+          border:'',
+          showClear:false, //显示清空icon
+          timer:null
         }
         this.textInput = React.createRef();
         this.handleClearVal = this.handleClearVal.bind(this);
@@ -27,13 +27,14 @@ class SearchBox extends React.Component {
         this.handleBlur = this.handleBlur.bind(this);
         this.clickIcon = this.clickIcon.bind(this);
         this.handleSearchSelect = this.handleSearchSelect.bind(this);
+        this.reset = this.reset.bind(this);
     }
     handleClearVal(){
         const { clearSearch } = this.props;
         this.textInput.current.value = '';
         this.textInput.current.focus();
         this.setState({
-            showClear:false
+          showClear:false
         });
         clearSearch&&clearSearch();
     }
@@ -41,11 +42,8 @@ class SearchBox extends React.Component {
       e.stopPropagation();
       e.preventDefault();
       const {cliIndex,chooseSearch,clearSearch,onSelect} = this.props;
+      chooseSearch&&chooseSearch({item:item,index:cliIndex});
       onSelect();//上一级的“确定”事件
-      setTimeout(()=>{
-        chooseSearch&&chooseSearch({item:item,index:cliIndex})
-      },200)
-      
       clearSearch&&clearSearch();
       this.textInput.current.value = "";
     }
@@ -87,17 +85,25 @@ class SearchBox extends React.Component {
         this.textInput.current.focus();
       },0)
     }
+    // 重置事件
+    reset(){
+      const { clearSearch } = this.props;
+      clearSearch();
+      this.textInput.current.value = "";
+      this.setState({
+        showBox:false,
+        border:false,
+        showClear:false
+      })
+    }
+    componentDidMount(){
+      this.props.onRef(this);
+    }
     componentWillReceiveProps(next){
       // 隐藏时,清空搜索框内文字,清空搜索结果,隐藏搜索框
       const { clearSearch } = this.props;
       if(!next.show && next.show != this.props.show){
-        clearSearch();
-        this.textInput.current.value = "";
-        this.setState({
-          showBox:false,
-          border:false,
-          showClear:false
-        })
+        this.reset();
       }
     }
     render() {

+ 8 - 5
src/components/SpreadDrop/index.jsx

@@ -391,6 +391,7 @@ class ListItems extends Component{
   constructor(props){
     super(props);
     this.$cont = React.createRef();
+    this.clickConfirm = this.clickConfirm.bind(this);
   }
   getLabels(){
     const {data,handleSelect} = this.props;
@@ -418,6 +419,11 @@ class ListItems extends Component{
     });
     return list;
   }
+  clickConfirm(){
+    const {handleConfirm} = this.props;
+    this.child&&this.child.reset();//重置搜索框中的数据
+    handleConfirm();   
+  }
   getStyle(){
     const {show,left} = this.props;
     return {
@@ -432,12 +438,12 @@ class ListItems extends Component{
         {this.getLabels()}
         <div className="oper clearfix">
           <span className={style['clear']} onClick={handleClear}>清空选项</span>
-          <span className={style['confirm']} onClick={handleConfirm}>确定</span>
+          <span className={style['confirm']} onClick={this.clickConfirm}>确定</span>
         </div>
         
         {boxMark==1 && tagType==11 && <div className="search">
                   <div className={style["line"]}></div>
-                  <SearchBox show={show} cliIndex={cliIndex} onSelect={handleConfirm}/>
+                  <SearchBox show={show} cliIndex={cliIndex} onSelect={handleConfirm} onRef={(child)=>{this.child = child;}}/>
                 </div>}
       </div>
   }
@@ -537,9 +543,6 @@ class ListItem extends Component{
   getMainData(){//主诉添加症状-带搜索框
     const {datas,isSpecialPos} = this.props;
     return datas&&datas.map((it,i)=>{
-      /*if(isSpecialPos){
-        return <li onClick={(e)=>this.handleClick(e,it,i)} className={this.getClass(it.id)}>{it.name}</li>
-      }*/
       return <li onClick={(e)=>this.handleClick(e,it,i)} 
             className={this.getClass(it.id)} 
             title={it.name.length>4?it.name:''}