Przeglądaj źródła

输入框类型双击无法编辑1395

liucf 6 lat temu
rodzic
commit
72b2b9e54a
1 zmienionych plików z 9 dodań i 2 usunięć
  1. 9 2
      src/common/components/InlineTag/index.jsx

+ 9 - 2
src/common/components/InlineTag/index.jsx

@@ -32,6 +32,11 @@ class InlineTag extends Component {
   }
   changeToEdit(e){
     const {handledbClick,id} = this.props;
+    // 输入框有值才可以双击编辑
+    const text = this.$span.current.innerText;
+    if(!text.trim()){
+      return
+    }
     this.setState({
       editable:true
     });
@@ -64,6 +69,7 @@ class InlineTag extends Component {
    // e.target.innerText = text;  
   }
   handleBlur(e){         //鼠标离开是保存值到store中
+    e.stopPropagation(); //不阻止会触发外层div的失焦事件
     const {value} = this.state;
     const {handleInput,ikey,prefix,suffix} = this.props;
     this.$span.current.innerText?(this.$span.current.innerText=''):(this.$span.current.innerHTML='');      //修改生成文字变成输入的2倍bug
@@ -118,12 +124,13 @@ class InlineTag extends Component {
   }
   render(){
     const {placeholder,value,prefix,suffix} = this.props;
+    const {editable} = this.state;
     const inp = this.state.value;
     return <div className={this.getStyle()}
                  onDoubleClick={this.changeToEdit}
-                  onClick={this.handleFixClick}
+                  onClick={!editable?this.handleFixClick:''}
                  onkeydown={handleEnter}
-                 onBlur={this.changeToClick} ref={this.$box} contentEditable={this.state.editable}>
+                 onBlur={this.changeToClick} ref={this.$box} contentEditable={editable}>
                 {prefix}
                 <span className={style['free-in']}
                       contentEditable={true}