数字组件优化

src/components/NumberDrop/index.jsx

@@ -23,7 +23,8 @@ class NumberDrop extends Component{
       boxLeft:0,
       boxTop:0,
       tmpTop:0,
-      tmpScroll:0
+      tmpScroll:0,
+      placeholder:props.placeholder
     };
     this.$span = React.createRef();
     this.$pre = React.createRef();
@@ -36,6 +37,7 @@ class NumberDrop extends Component{
     this.handleNumFocus = this.handleNumFocus.bind(this);
     this.handleBlur = this.handleBlur.bind(this);
     this.changeToEdit = this.changeToEdit.bind(this);
+    this.handleKeyDowm = this.handleKeyDowm.bind(this);
   }
   select(text){        //选中键盘上数字事件
     const {handleSelect,ikey,suffix,prefix,mainSaveText} = this.props;
@@ -45,6 +47,14 @@ class NumberDrop extends Component{
     handleSelect&&handleSelect({ikey,text,suffix,prefix,mainSaveText});
   }
   handleNumFocus(e){       //数字框可编辑状态下聚集事件，处理是否显示下拉等
+    const {placeholder} = this.state;
+    const val = e.target.innerText.trim();
+    //console.log(33,e.target.innerText,placeholder,e.target.innerText.trim() == placeholder)
+    if(val!=''&&val == placeholder){
+      this.setState({
+        placeholder:''
+      });
+    }
     e.stopPropagation();
   }
   handleNumClick(e){      //数字框不可编辑的状态时点击事件，点击将数字框变为可输入且下拉不再显示直到失焦后再次聚集
@@ -81,6 +91,11 @@ class NumberDrop extends Component{
   }
   numInpBlur(e){        //数字框失焦，保存值到store中
     e.stopPropagation();
+    if(!e.target.innerText.trim()){
+      this.setState({
+        placeholder:this.props.placeholder
+      });
+    }
     if(this.props.show){      //修改清空后第一次点击键盘不触发click事件bug
       return;
     }
@@ -88,7 +103,8 @@ class NumberDrop extends Component{
       hasSelect:false
     });
     const val = e.target.innerText.replace(/^\s*/,'');
-    const {handleSelect,ikey,suffix,prefix,mainSaveText,placeholder} = this.props;
+    const {handleSelect,ikey,suffix,prefix,mainSaveText} = this.props;
+    const {placeholder} = this.state;
     const text = val===placeholder?'':val;
     e.target.innerText = '';      //避免出现重复输入值
     handleSelect&&handleSelect({ikey,text,suffix,prefix,mainSaveText});
@@ -98,10 +114,20 @@ class NumberDrop extends Component{
     const {handleHide} = this.props;
     handleHide&&handleHide();
   }
+  handleKeyDowm(e){
+    handleEnter();
+    //只能输入数字
+    const key = e.key;
+    if(!/[0-9]/.test(key)){
+      e.preventDefault();
+      return false;
+    }
+  }
   getClasses(){         //整个标签是否有值的状态
-    const {value,hideTag,placeholder} = this.props;
+    const {hideTag,placeholder,value} = this.props;
+    const val = this.$span.current&&this.$span.current.innerText.trim()||value;
     const blueBorder = this.state.editable?style['blue-border']:'';
-    const isSelected = value&&value!=placeholder?style['selected']:style['container'];
+    const isSelected = val&&val!=placeholder?style['selected']:style['container'];
     const noTag = hideTag?style['no-tag']:'';
     return className(isSelected,noTag,blueBorder);
   }
@@ -141,9 +167,14 @@ class NumberDrop extends Component{
     const cls = this.props.show?style['blued']:'';
     return cls;
   }
+  componentDidMount(){
+    //设置最小宽度避免输入后宽度跳动
+    const spanWidth = window.getComputedStyle(this.$span.current).width;
+    this.$span.current.style.minWidth=spanWidth;
+  }
   render(){
-    const {placeholder,prefix,suffix,show,value,handleHide} = this.props;
-    const {numEditable,editable,hasSelect,boxTop,boxLeft} = this.state;
+    const {prefix,suffix,show,value,handleHide} = this.props;
+    const {numEditable,placeholder,editable,hasSelect,boxTop,boxLeft} = this.state;
     return <div className={this.getClasses()}
                 ref={this.$cont}
                 onDoubleClick={this.changeToEdit}
@@ -159,7 +190,7 @@ class NumberDrop extends Component{
             onBlur={this.numInpBlur}
             onInput={this.handleSpanInp}
             className={this.getSpanClass()}
-            onkeydown={handleEnter}>&nbsp;{value||placeholder}</span>
+            onkeydown={this.handleKeyDowm}>&nbsp;{value||placeholder}</span>
       <span ref = {this.$suf}>&nbsp;{suffix}</span>
       <NumberPan handleSelect={(text)=>this.select(text)}
                  onClose={handleHide}