细节优化

src/common/components/SearchBox/index.jsx

@@ -2,26 +2,24 @@ import React from 'react';
 import styles from './index.less';
 import clear from './imgs/clear.png';
 import search from './imgs/search.png';
-import PropTypes from "prop-types";
 import config from '@config/index';
-import $ from 'jquery';
 import classNames from 'classnames';
 import SearchDrop from '@components/SearchDrop';
 import ScrollArea from 'react-scrollbar';
 /**
- * 搜索框
- * handleChangeValue  函数参数为输入框的value值
+ * 主诉“添加症状”下拉中的：搜索框（含结果下拉）
+ * 接收参数：
+ * show:上级下拉是否隐藏，用于componentWillReceiveProps中
+ * cliIndex：上级点击标签的index（如“添加症状”），用于选中数据插入的位置标识；
  */
 class SearchBox extends React.Component {
     constructor(props) {
         super(props);
         this.state = {
-            val:'',
             showBox:false, //显示搜索结果
             border:'',
-            show:false, //显示清空icon
+            showClear:false, //显示清空icon
             timer:null,
-            searchData:[]
         }
         this.textInput = React.createRef();
         this.handleClearVal = this.handleClearVal.bind(this);
@@ -30,16 +28,12 @@ class SearchBox extends React.Component {
         this.clickIcon = this.clickIcon.bind(this);
         this.handleSearchSelect = this.handleSearchSelect.bind(this);
     }
-    componentDidMount(){
-      // this.props.handleChangeValue('');
-    }
     handleClearVal(){
         const { clearSearch } = this.props;
         this.textInput.current.value = '';
         this.textInput.current.focus();
         this.setState({
-            val:'',
-            show:false
+            showClear:false
         });
         clearSearch&&clearSearch();
     }
@@ -47,11 +41,7 @@ class SearchBox extends React.Component {
       e.stopPropagation();
       e.preventDefault();
       const {cliIndex,chooseSearch,clearSearch,onSelect} = this.props;
-      onSelect();//上一级的“确定”
-      /*this.setState({
-        val:'',
-        show:false
-      });*/
+      onSelect();//上一级的“确定”事件
       setTimeout(()=>{
         chooseSearch&&chooseSearch({item:item,index:cliIndex})
       },200)
@@ -67,37 +57,32 @@ class SearchBox extends React.Component {
         let timer = setTimeout(()=>{
             clearTimeout(this.state.timer);
             if(e.target.value.trim() == ''){
-                this.setState({
-                  show:false
-                })
-                return
+              this.setState({
+                showClear:false
+              })
+              return
             }
             this.setState({
-                val:e.target.value,
-                show:true
+              showClear:true
             })
             getSearchData && getSearchData({inpStr:e.target.value.replace('<br>',''),boxMark:1,itemType:0,mainIds:mainIds});
         },config.delayTime);
         this.setState({
-            timer
+          timer
         });
     }
-    handleFocus(e){
+    handleFocus(e){//聚焦时边框变蓝色
       e.stopPropagation();
       e.preventDefault();
-      if(this.state.val.trim() != ''){
-        return;
-      }else{
-          this.setState({border:true})
-      }
+      this.setState({border:true})
     }
     handleBlur(e){
       e.stopPropagation();
       e.preventDefault();
-      this.setState({border:false,val:''})
+      this.setState({border:false})
     }
     clickIcon(){
-      this.setState({showBox:true,val:''})
+      this.setState({showBox:true})
       setTimeout(()=>{
         this.textInput.current.focus();
       },0)
@@ -110,18 +95,17 @@ class SearchBox extends React.Component {
         this.textInput.current.value = "";
         this.setState({
           showBox:false,
-          val:'',
           border:false,
-          searchData:[]
+          showClear:false
         })
       }
     }
     render() {
-        const { children,visible,mainSearchData } = this.props;
-        const { show ,border, showBox,searchData} = this.state;
-        const showBd = showBox?styles['borderNone']:'';
-        const borderCor = border?styles['border']:'';
-        const isShow = showBox?styles['show']:styles['hide'];
+        const { mainSearchData } = this.props;
+        const { showClear ,border, showBox} = this.state;
+        const showBd = showBox?styles['borderNone']:'';//显示边框
+        const borderCor = border?styles['border']:''; //蓝色边框
+        const isShow = showBox?styles['show']:styles['hide']; //是否显示输入框
         let litext = '';
         const contStyle={
           opacity:'0.4',
@@ -134,19 +118,19 @@ class SearchBox extends React.Component {
         return (
             <div className={classNames(styles['search'])} onClick={(e)=>{e.stopPropagation();}} onBlur={(e)=>{e.stopPropagation();}}>
                 <img className={styles.searchVal} src={search} alt="搜索" onClick={this.clickIcon}/>
-                <img style={{display:show?'block':'none'}} className={styles.clearVal} src={clear} onClick={this.handleClearVal} alt="清空" />
+                <img style={{display:showClear?'block':'none'}} className={styles.clearVal} src={clear} onClick={this.handleClearVal} alt="清空" />
                 <input
-                    className={classNames(isShow,showBd,borderCor)}
+                    className={classNames(isShow,borderCor,showBd)}
                     type="text"
                     maxLength="30"
                     ref={this.textInput}
                     onFocus={this.handleFocus}
                     onBlur={this.handleBlur}
                     onInput={(e) => { 
-                        this.handleInput(e)
+                      this.handleInput(e)
                     }}
                     onPropertyChange={(e) => {  // 兼容ie
-                        this.handleInput(e)
+                      this.handleInput(e)
                     }}
                 />
                 {mainSearchData&&mainSearchData.length>0 ? <div className={styles.autoList}>
@@ -169,12 +153,4 @@ class SearchBox extends React.Component {
         )
     }
 }
-/*SearchBox.defaultProps = {
-    visible: false
-};
-
-SearchBox.propTypes = {
-    visible:PropTypes.bool,
-    handleChangeValue: PropTypes.func
-};*/
 export default SearchBox;

src/common/components/SearchBox/index.less

@@ -13,7 +13,6 @@
       background: #fff;
       border: 1px solid #ccc;
        ul{
-        // border: 1px solid #ccc;
         li:hover{
           border: 1px solid #3B9ED0;
         }
@@ -26,8 +25,11 @@
         padding: 0 32px;
         box-sizing: border-box;
     }
+    input::ms-clear{
+        display: none;
+    }
     .border {
-        border: 1px solid @blue;
+        border: 1px solid @blue !important;
     }
     .borderNone {
         border: 1px solid #979797;