主诉带输入类型字数限制bug修改

src/common/components/InlineTag/index.jsx

@@ -1,6 +1,8 @@
 import React, { Component } from "react";
 import style from "./index.less";
 import classNames from 'classnames';
+import Notify from '@commonComp/Notify';
+import config from '@config/index';
 /***
  * 标签组件
  * author:zn@2018-11-08
@@ -17,7 +19,7 @@ class InlineTag extends Component {
     this.$span = React.createRef();
     this.state = {
       value:props.value||'',
-      placeholder:props.placeholder||''
+      over:false
     };
     this.handleBlur = this.handleBlur.bind(this);
     this.handleInput = this.handleInput.bind(this);
@@ -26,35 +28,50 @@ class InlineTag extends Component {
   }
   handleInput(e){       //输入时保存临时值，在修改灰显为黑色时判断用
     e.stopPropagation();
-    const value = e.target.innerText||e.target.innerHTML.replace(/ $|^ /,'');//兼容firefox26
+    const {mainSaveText,ikey,prefix,suffix,value,boxMark} = this.props;
+    const val = e.target.innerText||e.target.innerHTML.replace(/ $|^ /,'');//兼容firefox26
+    const myval = prefix+val+suffix;
+    const i = ikey.split("-")[1];
+    const tempArr = [...mainSaveText];
+    tempArr.splice(i,1);
+    let lefts = tempArr.join("");
+    if(boxMark==='1'&&(lefts+myval).length>config.limited) {      //主诉超过字数限制提示并禁止输入
+      e.target.innerHTML = value||'';
+      Notify.info(config.limitText);
+      this.setState({
+        over:true
+      });
+      return;
+    }
     this.setState({
-      value:value
-    })
+      value:val,
+      over:false
+    });
   }
   handleBlur(e){         //鼠标离开是保存值到store中
     e.stopPropagation(); //不阻止会触发外层div的失焦事件
-    const value = e.target.innerText||e.target.innerHTML.replace(/ $|^ /,'');;
-    const {handleInput,ikey,prefix,suffix,placeholder} = this.props;
-    if(!value.trim()){
+    const val = e.target.innerText||e.target.innerHTML.replace(/ $|^ /,'');
+    const {handleInput,ikey,prefix,suffix,placeholder,value,boxMark} = this.props;
+    if(!val.trim()){
       this.setState({
-        placeholder:placeholder,
         value:''
       });
+      e.target.innerHTML = placeholder;
     }
-    //this.$span.current.innerText?(this.$span.current.innerText=''):(this.$span.current.innerHTML='');      //修改生成文字变成输入的2倍bug
-    handleInput&&handleInput({text:value.trim(),ikey,prefix,suffix});
-    this.setState({
-      value:value.trim()
-    });
+    if(boxMark==='1'&&this.state.over){     //超过字数限制，显示输入前的值
+      e.target.innerHTML = value||'';
+      return;
+    }
+    //主诉未超过字数限制，保存值
+    e.target.innerHTML = val.trim();
+    handleInput&&handleInput({text:val.trim(),ikey,prefix,suffix});
   }
   handleFocus(e){
     e.stopPropagation();
-    const text = e.target.innerText || e.target.innerHTML.replace(/ $|^ /,'');;
+    const text = e.target.innerText || e.target.innerHTML.replace(/ $|^ /,'');
     const {placeholder} = this.props;
     if(text.trim()==placeholder){
-      this.setState({
-        placeholder:''
-      });
+      e.target.innerHTML = '';
     }
   }
   getStyle(){
@@ -91,21 +108,12 @@ class InlineTag extends Component {
   }
   componentDidMount(){
     //设置最小宽度避免输入后宽度跳动
+    this.$span.current.innerHTML=this.props.placeholder;
     const spanWidth = window.getComputedStyle(this.$span.current).width;
     this.$span.current.style.minWidth=spanWidth;
   }
-  componentWillReceiveProps(nextProps){
-    if((nextProps.placeholder == this.props.placeholder)&&(nextProps.value == this.props.value)){
-      return
-    }
-    this.setState({
-      placeholder:nextProps.placeholder,
-      value:nextProps.value
-    })
-  }
   render(){
-    const {prefix,suffix,value} = this.props;
-    const {placeholder} = this.state;
+    const {prefix,suffix} = this.props;
     return <div className={this.getStyle()}
                 onClick={this.handleFixClick}>
                 <span>{prefix}</span>
@@ -115,7 +123,7 @@ class InlineTag extends Component {
                       onInput={this.handleInput}
                       onFocus={this.handleFocus}
                       onClick={(e)=>{e.stopPropagation();}}
-                      ref={this.$span}>&nbsp;{value||placeholder}</span>
+                      ref={this.$span}></span>
                 <span>{suffix}</span>
             </div>;
     }

src/containers/InlineTag.js

@@ -8,7 +8,9 @@ import InlineTag from "../common/components/InlineTag";
 import {getLabelIndex} from '@utils/tools.js';
 
 function mapStateToProps(state){
-  return {}
+  return {
+    mainSaveText:state.mainSuit.saveText,
+  }
 }
 
 const tagInpActions = {

src/containers/eleType.js

@@ -73,6 +73,7 @@ export function singleRadio(params){
     case 6:
       return <InlineTag prefix={data.labelPrefix}
                         suffix={data.labelSuffix}
+                        boxMark={boxMark}
                         placeholder={data.name}
                         isExtBlue={data.specFlag===4?true:false}
                         value={data.value}