newICSS/src/common/components/Textarea/index.jsx

import React, { Component } from "react";
import style from "./index.less";
import Notify from '../Notify';
import config from '@config/index';
import {isIE} from '@utils/tools.js';
import {getFeature} from '@store/async-actions/fetchModules';
import {getAllDataList,getAllDataStringList,ifOtherClear,setFontColorSize} from "@utils/tools.js";
import store from '@store';
import $ from "jquery";

class Textarea extends Component {
  constructor(props) {
    super(props);
    this.state = {
      timer:null,
      inpText:'',
      overFlag:false,
      editable:true,
    };
    this.$dom = React.createRef();
    this.handleInput = this.handleInput.bind(this);
    this.handleFocus = this.handleFocus.bind(this);
    //this.handleBlur = this.handleBlur.bind(this);
    this.handleKeydown = this.handleKeydown.bind(this);
    this.handleBlur = this.handleBlur.bind(this);
  }
  handleFocus(e){            //初始显示props中的值，focus已经显示输入的值，避免值更新闪烁
    const {handleFocus,fuzhen,handleInput,isChronic,hasMain,boxMark} = this.props;
    //黏贴时去掉html格式
    const that = this;
    let txt = '';
    $(this.$dom.current).on("paste",function(e){
      setTimeout(function(){
        txt = that.$dom.current.innerText||that.$dom.current.innerHTML;
        that.$dom.current.innerHTML = txt;
        that.moveEnd($(that.$dom.current)[0]);     //光标落到最后去
      });
    });
    //const {inpText} = this.state;console.log(inpText,boxMark,hasMain)
    if(boxMark!='1'&&boxMark!='2'&&!hasMain&&!e.target.innerText){
      //现病史、其他史无主诉且本身无内容是聚焦提示无法操作
      this.setState({
        editable:false
      });
      e.target.blur();
      Notify.error("无法操作，请先输入主诉");
      return;
    }else{
      this.setState({
        editable:true
      });
    }
    handleFocus&&handleFocus();         //其他史、查体获取数据的方法
    /*if(fuzhen&& !isChronic&&!(this.$dom.current.innerText?this.$dom.current.innerText:this.$dom.current.innerHTML)){
      const text = config.currentText.replace("(**)",fuzhen.replace(";",''));
      this.$dom.current.innerText?(this.$dom.current.innerText = text):(this.$dom.current.innerHTML = text);
      handleInput&&handleInput({text});
    }*/

  }
  handleInput(e){
    const {handleInput,boxMark,handlePush,value} = this.props;
    const {inpText,overFlag,editable} = this.state;
    const text = e.target.innerText || e.target.innerHTML;
    const stimer = this.state.timer;
    if(!editable){
      e.target.innerText='';
      return ;
    }
    if(boxMark=='1'&&text.length>config.limited){           //主诉字符数限制
      e.target.innerText?(e.target.innerText = text.substr(0,config.limited)):(e.target.innerHTML = text.substr(0,config.limited));
      e.target.blur();
      Notify.error(config.limitText);
      if(overFlag){
        e.target.innerText?(e.target.innerText = inpText):(e.target.innerHTML = inpText);
        return
      }
      this.setState({
        inpText:text.substr(0,config.limited),
        overFlag:true
      });
      handleInput&&handleInput({text:text.substr(0,config.limited).replace('<br>','')});
      return;
    }
    /*if(boxMark=='3'&&!hasMain){
      e.target.innerText = '';
      return;
    }*/
    this.setState({
      inpText:text,
      overFlag:false
    })

    //存值到store  FF26 会有一个<br>
    handleInput&&handleInput({text:text.replace('<br>','')});
    //右侧推送--延时推送
    clearTimeout(stimer);
    let timer = setTimeout(function(){
      handlePush&&handlePush();
      clearTimeout(stimer);
    },config.delayPushTime);
    this.setState({
      timer
    });
  }
  //除主诉外 其他是否为空
  ifClear(){
    let baseList = store.getState();
    let jsonData = getAllDataList(baseList);
    let jsonStr = getAllDataStringList(baseList);
    let flg = ifOtherClear(jsonData,jsonStr,baseList);
    return flg;
  }
  handleBlur(e){
    const {saveChronic} = this.props;
    const text = e.target.innerText || e.target.innerHTML;
    //解除绑定事件
    $(this.$dom.current).off("paste");
    getFeature(text).then((res)=>{
      if(res.data.code==0){
        const result = res.data.data;
        // 慢病
        if(result && result[0].chronicLabel==1){
          let flg = this.ifClear();
          if(!flg){
            saveChronic && saveChronic(result[0],true);
          }
        }
      }
    })
  }
  handleKeydown(e){
    const {boxMark} = this.props;
    const ev = e||window.event;
    if(+boxMark===1){
      //禁止回车事件
      if(ev.keyCode==13){return false;}
    }
  }
  // shouldComponentUpdate(next){  切换字体设置不渲染
  //   if(JSON.stringify(next) == JSON.stringify(this.props)){
  //     return false;
  //   }
  //   return true;
  // }
  componentWillReceiveProps(next){
    const isRead = this.props.isRead;
    if(next.isRead != isRead||(next.value!=this.props.value&&next.value&&next.value.indexOf("复诊")!=-1)){    //value对比解决复诊不显示bug,复诊对比解决关标跳到前面bug
      this.$dom.current.innerText?(this.$dom.current.innerText = next.value||''):(this.$dom.current.innerHTML = next.value||'');
      this.setState({
        inpText:''
      });
    }
  }
  componentDidMount(){
    const {value} = this.props;
    if(value){
      this.$dom.current.innerText?(this.$dom.current.innerText = value||''):(this.$dom.current.innerText=value||'');
    }
    if(isIE()){
      $(this.$dom.current).onIe8Input(function(e){
        this.handleInput(e)
      },this);
    }
  }
  render() {
    const { title,boxMark } = this.props;
    return (
      <div className={style["box"]}>
        <div className={`${style["title"]} ${setFontColorSize(2,4)}`}>{title}</div>
        {/*{isRead?<div className={style["content"]+" "+'11'} contentEditable={true} onFocus={this.handleFocus}>{value}</div>:''}*/}
        <div className={`${style["content"]} ${setFontColorSize(2,5)}`}
             onFocus={this.handleFocus}
             ref={this.$dom}
             contentEditable={true}
             onInput={this.handleInput}
             onkeydown={this.handleKeydown}
             onBlur={+boxMark===1?this.handleBlur:null}>
        </div>
      </div>
    );
  }
}

export default Textarea;