数字组件事件优化

src/components/NumberDrop/index.jsx

@@ -3,6 +3,8 @@ import className from 'classnames';
 import {NumberPan} from '@commonComp';
 import style from './index.less';
 import {handleEnter} from '@utils/tools.js';
+import config from '@config/index';
+import $ from "jquery";
 /***
  * author:zn@2018-11-19
  * 接收参数：
@@ -17,81 +19,71 @@ class NumberDrop extends Component{
     super(props);
     this.state={
       editable:false,      //标签是否可输入
-      numEditable:true,      //数字框是否可输入
+      //numEditable:true,      //数字框是否可输入
+      inputed:false,
       timer:null,
-      hasSelect:false,       //是否点过下拉键盘
-      isClosed:false
+      hasSelect:false       //是否点过下拉键盘
     };
     this.$span = React.createRef();
     this.$pre = React.createRef();
     this.$suf = React.createRef();
+    this.isIE = navigator.appName=="Microsoft Internet Explorer" && navigator.appVersion.split(";")[1].replace(/[ ]/g,"")=="MSIE8.0";
     this.select = this.select.bind(this);
     this.numInpBlur = this.numInpBlur.bind(this);
-    this.handleSpanInp = this.handleSpanInp.bind(this);
-    this.handleNumClick = this.handleNumClick.bind(this);
+    this.handleNumInput = this.handleNumInput.bind(this);
     this.handleNumFocus = this.handleNumFocus.bind(this);
     this.handleBlur = this.handleBlur.bind(this);
     this.changeToEdit = this.changeToEdit.bind(this);
   }
-  select(text){         //选中键盘上数字事件
+  select(text){    console.log('数字选中')     //选中键盘上数字事件
     const {handleSelect,ikey,suffix,prefix,mainSaveText} = this.props;
     this.setState({
       hasSelect:true
     });
     handleSelect&&handleSelect({ikey,text,suffix,prefix,mainSaveText});
   }
-  handleNumFocus(e){       //数字框可编辑状态下聚集事件，处理是否显示下拉等
+  handleNumFocus(e){    console.log('数字聚焦')   //数字框可编辑状态下聚集事件，处理是否显示下拉等
     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){
+      const {editable,timer} = that.state;
+      clearTimeout(timer);//取消延时的单击事件
+      if(editable){
         return;
       }
       handleShow&&handleShow({ikey,id:patId||id});
-      that.setState({
-        numEditable:false
-      });
     },300);
     this.setState({
       timer
     });
   }
-  handleNumClick(e){      //数字框不可编辑的状态时点击事件，点击将数字框变为可输入且下拉不再显示直到失焦后再次聚集
-    e.stopPropagation();
-    const {show,handleShow,ikey,id,patId,handleHide,value} = this.props;
-    const {hasSelect} = this.state;
-
-    if(show&&!hasSelect){
-      this.setState({
-        numEditable:true,
-        isClosed:true
-      });
-      handleHide&&handleHide();
-      setTimeout(function(){
-        e.target.focus();
-      });
-    }
-  }
-  numInpBlur(e){        //数字框失焦，保存值到store中
+  numInpBlur(e){  console.log('数字失焦')      //数字框失焦，保存值到store中
     e.stopPropagation();
     this.setState({
-      isClosed:false,
-      numEditable:true,
       hasSelect:false
     });
     const val = e.target.innerText.replace(/^\s*/,'');
     const {handleSelect,ikey,suffix,prefix,mainSaveText,placeholder} = this.props;
     const text = val===placeholder?'':val;
-    e.target.innerText = '';      //避免出现重复输入值
+    if(!this.isIE){
+      e.target.innerText = '';
+    }
+    //this.$pre.current.innerText = '';
+    //e.target.innerText = '';      //避免出现重复输入值
     handleSelect&&handleSelect({ikey,text,suffix,prefix,mainSaveText});
   }
-  handleSpanInp(e){    //数字框输入事件
-    e.stopPropagation();
-    //const {value} = this.props;
+  handleNumInput(){           //数字直接输入，关闭弹窗
+    const {handleHide,show} = this.props;
+    if(show){
+      handleHide&&handleHide();
+    }
+    /*if(!this.$span.current.innerHTML){
+      this.$span.current.innerHTML = ' ';
+    }*/
+    //console.log('输入：',this.$span.current.innerHTML,'32')
   }
   getClasses(){         //整个标签是否有值的状态
     const {value,hideTag,placeholder} = this.props;
@@ -99,10 +91,10 @@ class NumberDrop extends Component{
     const noTag = hideTag?style['no-tag']:'';
     return className(isSelected,noTag);
   }
-  changeToEdit(e){        //整个标签双击编辑状态
+  changeToEdit(){   console.log('双击编辑')     //整个标签双击编辑状态
     const {value,id,handleDbclick,patId} = this.props;
     clearTimeout(this.state.timer);//取消延时的单击事件
-    e.preventDefault();
+    //e.preventDefault();
     if(value&&value.trim()) {//有选中值的标签才能双击编辑
       this.setState({
         editable: true
@@ -112,7 +104,7 @@ class NumberDrop extends Component{
       handleDbclick && handleDbclick({id:patId||id});
     }
   }
-  handleBlur(e){     //双击编辑blur
+  handleBlur(e){  console.log('双击blur')   //双击编辑blur
     const {handleLabelChange,ikey,boxMark,value} = this.props;
     //if(!this.state.editable) return;
     this.setState({
@@ -130,24 +122,29 @@ class NumberDrop extends Component{
     const cls = !hasSelect&&this.props.show?style['blued']:'';
     return cls;
   }
+  componentDidMount(){
+    if(this.isIE){
+      $(this.$span.current).onIe8Input(function(e){
+        this.handleNumInput(e)
+      },this);
+    }
+  }
   render(){
     const {placeholder,prefix,suffix,show,value,handleHide} = this.props;
     const {numEditable,editable,hasSelect} = this.state;
     return <div className={this.getClasses()}
-                onDoubleClick={this.changeToEdit}
+                onDblClick={this.changeToEdit}
                 contentEditable={editable}
                 onBlur={this.handleBlur}
                 onkeydown={handleEnter}>
       <span ref = {this.$pre}>&nbsp;{prefix}</span>
       <span onFocus={this.handleNumFocus}
-            onClick={this.handleNumClick}
-            contentEditable={numEditable}
-            style={{minWidth:'10px',display:'inline-block'}}
-            ref = {this.$span}
+            onDblClick={this.changeToEdit}
             onBlur={this.numInpBlur}
-            onInput={this.handleSpanInp}
-            className={this.getSpanClass()}
-            onkeydown={handleEnter}>&nbsp;{value||placeholder}</span>
+            onInput={this.handleNumInput}
+            ref = {this.$span}
+            contentEditable={!editable}
+            className={this.getSpanClass()}>&nbsp;{value||placeholder}</span>
       <span ref = {this.$suf}>&nbsp;{suffix}</span>
       <NumberPan handleSelect={(text)=>this.select(text)}
                  onClose={handleHide}