数字键盘输入优化，bug修改

src/components/NumberDrop/index.jsx

@@ -18,10 +18,8 @@ class NumberDrop extends Component{
     super(props);
     this.state={
       editable:false,      //标签是否可输入
-      numEditable:true,      //数字框是否可输入
       timer:null,
       hasSelect:false,       //是否点过下拉键盘
-      isClosed:false,
       boxLeft:0,
       boxTop:0,
       tmpTop:0,
@@ -30,6 +28,7 @@ class NumberDrop extends Component{
     this.$span = React.createRef();
     this.$pre = React.createRef();
     this.$suf = React.createRef();
+    this.$cont = React.createRef();
     this.select = this.select.bind(this);
     this.numInpBlur = this.numInpBlur.bind(this);
     this.handleSpanInp = this.handleSpanInp.bind(this);
@@ -38,7 +37,7 @@ class NumberDrop extends Component{
     this.handleBlur = this.handleBlur.bind(this);
     this.changeToEdit = this.changeToEdit.bind(this);
   }
-  select(text){         //选中键盘上数字事件
+  select(text){        //选中键盘上数字事件
     const {handleSelect,ikey,suffix,prefix,mainSaveText} = this.props;
     this.setState({
       hasSelect:true
@@ -47,57 +46,42 @@ class NumberDrop extends Component{
   }
   handleNumFocus(e){       //数字框可编辑状态下聚集事件，处理是否显示下拉等
     e.stopPropagation();
-    const {show,handleShow,ikey,id,patId,handleHide,value} = this.props;
-    const that = this;
-
-    //双击时不显示下拉
-    const timer = setTimeout(function(){
-      const {hasSelect,editable,isClosed} = that.state;
-      if(editable||isClosed){
-        return;
-      }
-      handleShow&&handleShow({ikey,id:patId||id});
-      that.setState({
-        numEditable:false
-      });
-    },300);
-    this.setState({
-      timer
-    });
   }
   handleNumClick(e){      //数字框不可编辑的状态时点击事件，点击将数字框变为可输入且下拉不再显示直到失焦后再次聚集
-    this.setState({
-      boxLeft:getPageCoordinate(e).boxLeft,
-      boxTop:getPageCoordinate(e).boxTop,
-      tmpScroll: $("#addScrollEvent")[0].scrollTop,
-      tmpTop:getPageCoordinate(e).boxTop
-    });
-    $("#addScrollEvent").scroll(()=>{
-      let scrollYs = $("#addScrollEvent")[0].scrollTop;
-      this.setState({
-        boxTop:this.state.tmpTop - scrollYs + this.state.tmpScroll
-      })
-    })
-    e.stopPropagation();
     const {show,handleShow,ikey,id,patId,handleHide,value} = this.props;
-    const {hasSelect} = this.state;
-
-    if(show&&!hasSelect){
+    if(show) {
+      handleHide && handleHide();
+      return;
+    }else{
+      const {editable} = this.state;
+      if(editable){
+        return;
+      }
+      const that = this;
+      //双击时不显示下拉
+      clearTimeout(that.state.timer);
+      const timer = setTimeout(function(){
+        handleShow&&handleShow({ikey,id:patId||id});
+      },300);
       this.setState({
-        numEditable:true,
-        isClosed:true
-      });
-      handleHide&&handleHide();
-      setTimeout(function(){
-        e.target.focus();
+        timer,
+        boxLeft:getPageCoordinate(e).boxLeft,
+        boxTop:getPageCoordinate(e).boxTop,
+        tmpScroll: $("#addScrollEvent")[0].scrollTop,
+        tmpTop:getPageCoordinate(e).boxTop
       });
+      $("#addScrollEvent").scroll(()=>{
+        let scrollYs = $("#addScrollEvent")[0].scrollTop;
+        this.setState({
+          boxTop:this.state.tmpTop - scrollYs + this.state.tmpScroll
+        })
+      })
     }
+    e.stopPropagation();
   }
   numInpBlur(e){        //数字框失焦，保存值到store中
     e.stopPropagation();
     this.setState({
-      isClosed:false,
-      numEditable:true,
       hasSelect:false
     });
     const val = e.target.innerText.replace(/^\s*/,'');
@@ -106,9 +90,10 @@ class NumberDrop extends Component{
     e.target.innerText = '';      //避免出现重复输入值
     handleSelect&&handleSelect({ikey,text,suffix,prefix,mainSaveText});
   }
-  handleSpanInp(e){    //数字框输入事件
+  handleSpanInp(e){   //数字框输入事件
     e.stopPropagation();
-    //const {value} = this.props;
+    const {handleHide} = this.props;
+    handleHide&&handleHide();
   }
   getClasses(){         //整个标签是否有值的状态
     const {value,hideTag,placeholder} = this.props;
@@ -118,14 +103,19 @@ class NumberDrop extends Component{
     return className(isSelected,noTag,blueBorder);
   }
   changeToEdit(e){        //整个标签双击编辑状态
-    const {value,id,handleDbclick,patId} = this.props;
+    const {value,id,handleDbclick,patId,handleHide,show} = this.props;
     clearTimeout(this.state.timer);//取消延时的单击事件
     e.preventDefault();
+    if(show){
+      handleHide&&handleHide();
+    }
     if(value&&value.trim()) {//有选中值的标签才能双击编辑
       this.setState({
         editable: true
       });
-      //e.target.focus();
+      setTimeout(()=>{
+        this.$cont.current.focus();
+      })
       //双击埋点记录
       handleDbclick && handleDbclick({id:patId||id});
     }
@@ -152,6 +142,7 @@ class NumberDrop extends Component{
     const {placeholder,prefix,suffix,show,value,handleHide} = this.props;
     const {numEditable,editable,hasSelect,boxTop,boxLeft} = this.state;
     return <div className={this.getClasses()}
+                ref={this.$cont}
                 onDoubleClick={this.changeToEdit}
                 contentEditable={editable}
                 onBlur={this.handleBlur}
@@ -159,7 +150,7 @@ class NumberDrop extends Component{
       <span ref = {this.$pre}>&nbsp;{prefix}</span>
       <span onFocus={this.handleNumFocus}
             onClick={this.handleNumClick}
-            contentEditable={numEditable}
+            contentEditable={true}
             style={{minWidth:'10px',display:'inline-block'}}
             ref = {this.$span}
             onBlur={this.numInpBlur}