ソースを参照

修改placeholder不显示bug710

zhouna 6 年 前
コミット
21abb716f9
2 ファイル変更30 行追加23 行削除
  1. 16 16
      src/common/components/NumberPan/index.jsx
  2. 14 7
      src/components/NumberDrop/index.jsx

+ 16 - 16
src/common/components/NumberPan/index.jsx

@@ -67,28 +67,28 @@ class NumberPan extends Component{
                 onDoubleClick={(e)=>e.stopPropagation()}>
       <table className={style['pan']} >
         <tr>
-          <td><button onClick={select}>1</button></td>
-          <td><button onClick={select}>2</button></td>
-          <td><button onClick={select}>3</button></td>
-          <td><button onClick={select}>/</button></td>
+          <td><button onMouseUp={select}>1</button></td>
+          <td><button onMouseUp={select}>2</button></td>
+          <td><button onMouseUp={select}>3</button></td>
+          <td><button onMouseUp={select}>/</button></td>
         </tr>
         <tr>
-          <td><button onClick={select}>4</button></td>
-          <td><button onClick={select}>5</button></td>
-          <td><button onClick={select}>6</button></td>
-          <td><button onClick={this.handleBack.bind(this)}><img src={backspace} onClick={this.handleBack.bind(this)} /></button></td>
+          <td><button onMouseUp={select}>4</button></td>
+          <td><button onMouseUp={select}>5</button></td>
+          <td><button onMouseUp={select}>6</button></td>
+          <td><button onMouseUp={this.handleBack.bind(this)}><img src={backspace} onClick={this.handleBack.bind(this)} /></button></td>
         </tr>
         <tr>
-          <td><button onClick={select}>7</button></td>
-          <td><button onClick={select}>8</button></td>
-          <td><button onClick={select}>9</button></td>
-          <td><button onClick={this.handleClear.bind(this)} className={style['clearN']}>清空</button></td>
+          <td><button onMouseUp={select}>7</button></td>
+          <td><button onMouseUp={select}>8</button></td>
+          <td><button onMouseUp={select}>9</button></td>
+          <td><button onMouseUp={this.handleClear.bind(this)} className={style['clearN']}>清空</button></td>
         </tr>
         <tr>
-          <td><button onClick={select}>.</button></td>
-          <td><button onClick={select}>0</button></td>
-          <td><button onClick={select}>~</button></td>
-          <td><button onClick={this.handleClose.bind(this)} className={style['confirm']}>确定</button></td>
+          <td><button onMouseUp={select}>.</button></td>
+          <td><button onMouseUp={select}>0</button></td>
+          <td><button onMouseUp={select}>~</button></td>
+          <td><button onMouseUp={this.handleClose.bind(this)} className={style['confirm']}>确定</button></td>
         </tr>
       </table>
       </div>

+ 14 - 7
src/components/NumberDrop/index.jsx

@@ -21,6 +21,7 @@ class NumberDrop extends Component{
       editable:false,      //标签是否可输入
       timer:null,
       sltTimer:null,
+      blurTimer:null,
       hasSelect:false,       //是否点过下拉键盘
       boxLeft:0,
       boxTop:0,
@@ -45,6 +46,7 @@ class NumberDrop extends Component{
   select(text){        //选中键盘上数字事件
     let timer = null;
     clearTimeout(this.state.sltTimer);
+    clearTimeout(this.state.blurTimer);
     const {handleSelect,ikey,suffix,prefix,mainSaveText,min,max} = this.props;
     const needCompare=min!=undefined&&max!=undefined;
     if(!text){
@@ -164,9 +166,9 @@ class NumberDrop extends Component{
   numInpBlur(e){        //数字框失焦,保存值到store中
     e.stopPropagation();
     const {handleSelect,ikey,suffix,prefix,mainSaveText,min,max,show} = this.props;
-    if(show){      //修改清空后第一次点击键盘不触发click事件bug
+    /*if(show){      //修改清空后第一次点击键盘不触发click事件bug
       return;
-    }
+    }*/
     //输入超出合理范围或输入不是数字提示且清空
     const needCompare=min!=undefined&&max!=undefined;
     //if(needCompare){
@@ -181,11 +183,16 @@ class NumberDrop extends Component{
     //}
 
     //输入为空时显示placeholder
-    if(!e.target.innerText.trim()){
-      this.setState({
-        placeholder:this.props.placeholder
-      });
-    }
+    const timer = setTimeout(()=>{
+      if(!e.target.innerText.trim()){
+        this.setState({
+          placeholder:this.props.placeholder
+        });
+      }
+    },200);
+    this.setState({
+      blurTimer:timer
+    });
 
     const val = e.target.innerText.trim();
     const {placeholder} = this.state;