主诉单选含自由选项字数限制bug修改2281

src/components/RadioInpDrop/index.jsx

@@ -21,14 +21,13 @@ class RadioInpDrop extends Component{
     super(props);
     this.state={
       texts:props.vals||{0:props.value||props.placeholder},
-      over:false,
     };
     this.$cont = React.createRef();
     this.isIE = navigator.appName=="Microsoft Internet Explorer" && navigator.appVersion.split(";")[1].replace(/[ ]/g,"")=="MSIE8.0";
     this.handleSelect = this.handleSelect.bind(this);
     this.handleShow = this.handleShow.bind(this);
     this.parseInputDom = this.parseInputDom.bind(this);
-    this.handleInnerInp = this.handleInnerInp.bind(this);
+    this.handleInnerBlur = this.handleInnerBlur.bind(this);
   }
   getClass(){
     const {value,hideTag,show,isImports,isExtBlue} = this.props;
@@ -83,45 +82,31 @@ class RadioInpDrop extends Component{
       })
     },$("#addScrollEvent")[0])
   }
-  handleInnerInp(i,val){
+  handleInnerBlur(i,val){
     const {ikey,boxMark,handleSaveInp,mainSaveText} = this.props;
-    let vals = this.state.texts; 
-
-    // 主诉字数限制
-    if(boxMark==1){
-      let preText = vals[i].value;
-      let mainText = filterDataArr(mainSaveText);
-      let lengths = 0;
-      if(preText){
-        lengths = mainText.length + (val.length - preText.length);
-      }else{
-        lengths = mainText.length + val.length;
-      }
-      //console.log("val:",val,"preVal:",preText,"mainText:",mainText,"lengths:",lengths,this.state.texts)
-      if(lengths >= config.limited){
-        Notify.info(config.limitText);
-        this.setState({
-          over:true
-        });
-        return
-      }
-    }
-    
+    let vals = this.state.texts;
     vals[i].value=val;
     this.setState({
       texts:vals,
-      over:false
     });
     handleSaveInp({values:vals,ikey,boxMark,mainSaveText});
   }
   parseInputDom(){
-    const {value,placeholder} = this.props;
-    const {texts,over} = this.state;
+    const {mainSaveText,ikey,boxMark} = this.props;
+    const {texts} = this.state;
+    const inx = ikey.split("-")[1];
     let temp='',list=[];
     for(let i in texts){
       temp = texts[i];
       if(typeof temp=='object'){
-        list.push(<InputComp handleInp={this.handleInnerInp} index={i} value={temp.value} over={over}></InputComp>);
+        list.push(<InputComp handleBlur={this.handleInnerBlur}
+                             mainSaveText={mainSaveText}
+                             index={i}
+                             inx = {inx}
+                             texts={texts}
+                             boxMark={boxMark}
+                             value={temp.value}
+                             ></InputComp>);
       }else{
         list.push(<span>&nbsp;{temp}</span>);
       }
@@ -147,34 +132,72 @@ class InputComp extends Component{
     super(props);
     this.$inp = React.createRef();
     this.handleBlur = this.handleBlur.bind(this);
+    this.handleInp = this.handleInp.bind(this);
   }
   handleBlur(e){
     e.stopPropagation();
+    if(this.over){
+      return;
+    }
     // FF26 只有innerHTML
     const text = e.target.innerText || e.target.innerHTML;
-    const {handleInp,index,value} = this.props;
-    e.target.innerText?(e.target.innerText = ''):(e.target.innerHTML = '');
+    const {handleBlur,index} = this.props;
+    e.target.innerHTML = '';
     // FF26 会把&nbsp; 也获取到
-    handleInp(index,text.replace('&nbsp;',''));
+    handleBlur(index,text.replace('&nbsp;',''));
   }
-  componentWillReceiveProps(next){
-    if(next.over&&!this.props.over){
-      const inp = this.$inp.current;
-      const value = this.props.value;
-      setTimeout(function(){
-        inp.innerText?(inp.innerText = ''):(inp.innerHTML = '');
-        inp.innerText?(inp.innerText = value):(inp.innerHTML = value);
-      })
+  getTextVal(obj=[],index){
+    let str = '';
+    Object.keys(obj).map((it)=>{
+      if(typeof obj[it]==='string'){
+        str += obj[it];
+      }else{
+        if(it!==index){       //当前输入框文字不记录，避免重复计算
+          str += obj[it].value;
+        }
+      }
+    });
+    return str;
+  }
+  handleInp(e){
+    const val = e.target.innerText||e.target.innerHTML;
+    const {mainSaveText,value,index,texts,inx,boxMark} = this.props;
+    if(boxMark==='1'){
+      const textVal = this.getTextVal(texts,index);    //已存的单选含自由输入生成的文字
+      const tempArr = [...mainSaveText];
+      tempArr.splice(inx,1);
+      const otherVal = tempArr.join("");      //主诉其他的已填文字
+      //console.log(textVal,otherVal,val)
+      //超出主诉限制提示并不可继续输入
+      if((textVal+otherVal+val).length>config.limited){
+        e.target.innerHTML=value||'';
+        this.over=true;
+        //e.target.blur();
+        Notify.info(config.limitText);
+        return;
+      }
+      this.over=false;
     }
+    this.over=false;
+  }
+  componentWillReceiveProps(next){
+    //超过限制时，再点开下拉被删除的输入文字又出现bug修改
+    const inp = this.$inp.current;
+    const value = next.value;
+    inp.innerHTML = '';
+    setTimeout(function(){
+      inp.innerHTML = value;
+    });
   }
   render(){
     const {value} = this.props;
     return <span contentEditable={true}
-                          ref={this.$inp}
+                 ref={this.$inp}
                  className={style['inner-inp']}
                  onClick={(e)=>{e.stopPropagation()}}
                  onFocus={(e)=>{e.stopPropagation()}}
-                 onBlur={this.handleBlur}>&nbsp;{value}</span>
+                 onInput={this.handleInp}
+                 onBlur={this.handleBlur}>&nbsp;</span>
   }
 }
 

src/components/RadioInpDrop/index.less

@@ -30,4 +30,7 @@
   min-width:30px;
   text-align:center;
   word-break: break-all;
+  /**ff26必需**/
+  min-height: 22px;
+  vertical-align: middle;
 }