主诉输入闪烁问题，回读和清除有bug

src/common/components/ItemBox/index.jsx

@@ -38,13 +38,9 @@ class ItemBox extends Component {
     }
   }
 
-  /*componentWillReceiveProps(next){
-    if(this.props.value && next.value!=this.props.value){
-      this.$div.current.innerText?(this.$div.current.innerText = next.value||''):(this.$div.current.innerHTML = next.value||'');
-    }
-  }*/
-
   componentDidMount(){
+    const {setRef} = this.props;
+    setRef&&setRef(this.$div);
     if(isIE()){
       $(this.$div.current).onIe8Input(function(e){
         this.handleInput(e)

src/components/MainSuit/index.jsx

@@ -8,7 +8,12 @@ import chooseType from '@containers/eleType.js';
 import config from "@config/index";
 import {isIE,getPageCoordinate,windowEventHandler,filterDataArr} from "@utils/tools.js"
 import $ from 'jquery';
-
+let clearText = (dom)=>{
+  // console.log(555,dom);
+  if(dom){
+    dom.current.innerText = '';
+  }
+}
 class MainSuit extends Component{
   constructor(props){
     super(props);
@@ -29,6 +34,9 @@ class MainSuit extends Component{
       overFlag:false,
       tmpScroll:0,
       tmpTop:0,
+      searchData:props.searchData||[],
+      clearFlag:false,
+      n:0
     };
     this.toggleEditable = this.toggleEditable.bind(this);
     this.handleFocus = this.handleFocus.bind(this);
@@ -40,6 +48,12 @@ class MainSuit extends Component{
   }
   componentWillReceiveProps(nextProps){
     this.setState({boxLeft:nextProps.boxLeft})
+    const {datas,saveText} = this.props;
+    // if(datas.length==0&&nextProps.saveText[0]!=this.props.saveText[0]){
+    if(datas.length==0&&nextProps.saveText[0]){
+      // 引用模板赋值
+      this.$div.current.innerText = nextProps.saveText[0];
+    } 
   }
   toggleEditable(){
     this.setState({
@@ -67,6 +81,7 @@ class MainSuit extends Component{
     e.stopPropagation();
     const {getCommonSymptoms,datas,clearDiagnose} = this.props;
     let innerText = e.target.innerText || e.target.innerHTML;//兼容火狐43
+    console.log(789,innerText);
     clearDiagnose&&clearDiagnose();//清除复诊数据
     if(!isIE()){//IE会触发onfocus和onblur事件
       if(!innerText.trim()){//有内容就走搜索接口
@@ -132,6 +147,7 @@ class MainSuit extends Component{
       return
     }
     // clearTimeout(this.state.timer);
+    this.$div.current.innerText = '';
     if(datas.length==0){//没有使用模板时点击搜索结构要展开模板
       insertSearch &&insertSearch({item,span});
       this.setState({
@@ -234,18 +250,21 @@ class MainSuit extends Component{
     const {freeText,saveText,datas,clearSearch,getSymptomFeature,currentData} = this.props;
     const that = this;
     const ev = e || window.event;
-    let data = this.state.inpText;
+    // let data = this.state.inpText;
+    let data = ev.target.innerText;
     if(!isIE()){
       if(currentData&&currentData.length==0){//现病史没有模板的时候才去获取
         getSymptomFeature && getSymptomFeature(ev.target.innerText);
       } 
-      ev.target.innerText?(ev.target.innerText=""):(ev.target.innerHTML="")
-      freeText && freeText(data.trim());
+      // ev.target.innerText?(ev.target.innerText=""):(ev.target.innerHTML="")
+      // this.$div.current.innerText = data; 
+      // freeText && freeText(data.trim());
+      freeText && freeText({data:data.trim(),div:this.$div});
     }else{
       if(datas.length==0){
         const data = ev.target.innerText;
         // freeText && freeText(data.trim());
-        freeText && freeText(data);
+        freeText && freeText({data});
       }
     }
     // 延时关闭常见症状下拉、清空搜索结果，不延时会影响选中
@@ -260,10 +279,30 @@ class MainSuit extends Component{
         clearTimer
       });*/  
   }
+  /*componentDidMount(){
+    const {datas,saveText} = this.props;
+    let text = this.$div.current?this.$div.current.innerText:'';  
+    // if(datas.length==0&&saveText[0]&& !text){
+      console.log("回读赋值",saveText[0]) ;//数据未更新完成
+    if(datas.length==0&&saveText[0]){
+      this.$div.current.innerText = saveText[0];
+    }
+  }*/
 
+  componentDidUpdate(){   
+    const {datas,saveText,clearAction,refresh} = this.props;
+    if(clearAction){//清除
+      if(clearText){
+        clearText(this.$div);
+        // 更新页面
+        // refresh&&refresh()
+      }
+      clearText = null;
+    }
+  }
 
   render(){
-    const {type,CommonSymptoms,searchData,fetchPushInfos,isRead,totalHide,handleInput,fuzhen,saveText,editClear,datas,commSymHide,boxLeft,boxTop} = this.props;
+    const {type,CommonSymptoms,fetchPushInfos,searchData,isRead,totalHide,handleInput,fuzhen,saveText,editClear,datas,commSymHide,boxLeft,boxTop} = this.props;
     const {showModule,show,symptom,search} = this.state;
     const symptomFlag = CommonSymptoms.length>0 ? true : false;
     const searchFlag = searchData.length>0 ? true : false;
@@ -272,6 +311,7 @@ class MainSuit extends Component{
     }
     return  <div className={`${'mainsuit-box'} ${style['main-suit']}`} id="mainsuitBox">
       <ItemBox 
+      setRef={(el) =>{this.$div = el}}
       fuzhen={fuzhen} 
       title='主诉' 
       editable={editClear||datas.length==0?true:false} 
@@ -282,7 +322,7 @@ class MainSuit extends Component{
       handleBlur={this.handleBlur}
       data={datas}
       boxId="mainSuit">
-        {datas.length>0?<div style={{display:'inline-block'}}>{this.getInlineTag()}</div>:(saveText[0]?saveText[0]:'')}
+        {datas.length>0?<div style={{display:'inline-block'}}>{this.getInlineTag()}</div>:''}
       </ItemBox>
       {/*没有推送结果就不显示*/}
       {symptomFlag && !searchFlag ? <CommonSymptom data={CommonSymptoms} show={!totalHide&&symptom} onSelect={this.handleSelect} /> : ( searchFlag ? <SearchDrop data={searchData} show={!commSymHide} onSelect={this.handleSearchSelect} left={boxLeft} top={boxTop} />:"")}

src/components/SearchDrop/index.jsx

@@ -21,6 +21,9 @@ class SearchDrop extends Component{
   constructor(props){
     super(props);
     this.handleSelect = this.handleSelect.bind(this);
+    this.state={
+      data:props.data||[]
+    }
   }
   getClass(){
     let name = style['text-list'];

src/containers/MainSuit.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import MainSuit from '@components/MainSuit';
-import {CLEAR_COMSYMPTOMS,SHOW_TAIL,INSERT_MAIN,CLEAR_SEARCH,SET_SEARCH,SAVE_FREE,SET_DATA,INSERT_SEARCH,SETTEXTMODEVALUE,SET_FEATURE} from '@store/types/mainSuit';
+import {CLEAR_COMSYMPTOMS,SHOW_TAIL,INSERT_MAIN,CLEAR_SEARCH,SET_SEARCH,SAVE_FREE,SET_DATA,INSERT_SEARCH,SETTEXTMODEVALUE,SET_FEATURE,REFRESH_ITEM} from '@store/types/mainSuit';
 import {RESET,CLICKCOUNT,ISREAD,SEARCH_DROP_LOCATION} from '@store/types/homePage.js';
 import {getCommSymptoms,getCommSymptomPush} from '@store/async-actions/mainSuit.js'
 import {SET_MAIN_SUIT} from '@store/types/fillInfo';
@@ -12,7 +12,7 @@ import {filterArr,didPushParamChange,filterDataArr} from '@utils/tools.js';
 import config from '@config/index.js';
 import {Notify} from '@commonComp';
 
-function mapStateToProps(state) {//console.log(11,state);
+function mapStateToProps(state) {console.log(11,state);
   return {
     showDrop:state.mainSuit.showDrop,//用于更新
     update:state.mainSuit.update,
@@ -30,6 +30,7 @@ function mapStateToProps(state) {//console.log(11,state);
     span:state.mainSuit.span,
     addModuleName:state.mainSuit.addModuleName,//添加病情变化模板名称
     editClear:state.mainSuit.editClear,
+    clearAction:state.mainSuit.clearAction,//清除
     mainIds:state.mainSuit.mainIds,//选中症状的id，搜索去重用
     isRead:state.homePage.isRead,
     commSymHide:state.homePage.commSymHide,
@@ -178,6 +179,9 @@ function mapDispatchToProps(dispatch) {
             data:data
           })
         }
+      },
+      refresh(){
+        dispatch({type:REFRESH_ITEM})
       }
     }
 }

src/store/actions/mainSuit.js

@@ -539,14 +539,16 @@ export const changeNumLabelVal = (state,action)=>{
 export const saveFreeVal = (state,action)=>{
   const res = Object.assign({},state);
   let data = action.data;
-  res.saveText[0] = data;
+  // res.saveText[0] = data;
+  res.saveText[0] = data.data;
+  res.div = data.div;
   /*if(data.trim()){
    res.saveText[0] = data;
   }else{
     res.saveText = [];
   }*/
   // res.update = Math.random();
-  // console.log(666,action,res);
+  // console.log(345,action,res);
   return res;
 }
 
@@ -564,6 +566,12 @@ export const clearMainSuit = (state,action)=>{//回读和清除
   if(res.data.length > 0){//回读
     res.editClear = false;
   }
+   res.clearAction = action.clearAction;
+  // console.log(345,action,res);
+  if(action.clearAction){//清除
+    res.div?res.div.current.innerText = '':'';
+  }
+  res.update = Math.random();
   return res;
 }
 

src/store/reducers/mainSuit.js

@@ -1,7 +1,7 @@
 import {COMM_SYMPTOMS,CLEAR_COMSYMPTOMS,SHOW_TAIL,INSERT_MAIN,
   SET_SEARCH,CLEAR_SEARCH,GET_BIGDATAPUSH,SET_MAINSUIT,MIX_CONFIRM,NUMBER_SELECT,
   RADIO_SELECT,COMM_CONFIRM,CHANGE_LABELVAL,SAVE_FREE,CLEAR_MAIN_SUIT,SET_DATA,
-  INSERT_SEARCH,MAIN_FOCUS_INDEX,SETTEXTMODEVALUE,SETMAINTEXT,MAINADDLABELITEM,SETMAININPUT,DEL_MAIN,CHANGE_LABELVAL_NUMBER,REMOVE_MAIN_ID,MAINSUIT_MUL,DEL_MAIN_LABLE,SET_FEATURE} from '../types/mainSuit'
+  INSERT_SEARCH,MAIN_FOCUS_INDEX,SETTEXTMODEVALUE,SETMAINTEXT,MAINADDLABELITEM,SETMAININPUT,DEL_MAIN,CHANGE_LABELVAL_NUMBER,REMOVE_MAIN_ID,MAINSUIT_MUL,DEL_MAIN_LABLE,SET_FEATURE,REFRESH_ITEM} from '../types/mainSuit'
 import {getCommSymptoms,handleTailClick,insertMain,setSearch,getBigSymptom,setMainMoudle,confirm,
   setNumberValue,setRadioValue,commConfirm,changeLabelVal,saveFreeVal,clearMainSuit,insertSearch,setTextModeValue,setCheckText,changeEditClear,addLabelItem,setInputLabel,backspaceText,changeNumLabelVal,removeId,multipleComfirn,delSingleLable,getSymptomFeature} from '../actions/mainSuit'
 
@@ -94,6 +94,9 @@ export default function(state=initState,action){
       return delSingleLable(state,action);
     case SET_FEATURE://主诉分词
       return getSymptomFeature(state,action);
+    case REFRESH_ITEM:
+      res.clearAction = false
+      return res;
     default:
       return state;
   }

src/store/types/mainSuit.js

@@ -27,3 +27,4 @@ export const REMOVE_MAIN_ID = 'REMOVE_MAIN_ID';     //移除id
 export const MAINSUIT_MUL = 'MAINSUIT_MUL';     //单列多选
 export const DEL_MAIN_LABLE = 'DEL_MAIN_LABLE';     
 export const SET_FEATURE = 'SET_FEATURE';  //主诉分词   
+export const REFRESH_ITEM = 'REFRESH_ITEM';  //清除后更新主诉   

src/utils/tools.js

@@ -239,7 +239,7 @@ const getAllDataStringList =(baseList) =>{           //获取所有模块文本
 const pushAllDataList =(whichSign,action,reData,type) =>{           //回读清空所有的数据
     if(action == 'clear'){     //清空
       const block = Object.assign(JSON.parse(config.textLabel),{full:true});//空白时保留一个自由文本标签
-      store.dispatch({type: CLEAR_MAIN_SUIT,data:[],saveText:[],selecteds:[],editClear:true,mainIds:[]});
+      store.dispatch({type: CLEAR_MAIN_SUIT,data:[],saveText:[],selecteds:[],editClear:true,mainIds:[],clearAction:true});
         store.dispatch({type: CLEAR_CURRENT_ILL,data:[],saveText:[],selecteds:[],editClear:true,symptomIds:[]});
         store.dispatch({type: CLEAROTHERHISTORY,data:[block],isEmpty:true,saveText:[],selecteds:[],editClear:true});
         store.dispatch({type: CLEARCHECKBODY,data:[block],isEmpty:true,saveText:[],selecteds:[]});