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

import React, { Component } from "react";
import style from "./index.less";
import config from '@config/index';
import $ from 'jquery';
import { setFontColorSize,moveEnd} from '@utils/tools';
import store from '@store';
import { embedPush } from '../../../store/async-actions/pushMessage'
class Textarea extends Component {
  constructor(props) {
    super(props);
    this.state = {
      timer:null,
      val:'报告描述或意见'
    };
    this.textInput = React.createRef();
    this.$dom = React.createRef();
    this.$domW = React.createRef();
    this.handleInput = this.handleInput.bind(this);
    this.handleFocus = this.handleFocus.bind(this);
  }
  handleInput(e){
    const {handleChangeAssistValue,idx,handlePush} = this.props;
    const text = (e.target.innerText || e.target.innerHTML||e.target.textContent);
    $(e.target).find('img').remove();
    this.context.scrollArea.scrollBottom();       //避免滚动条上移不见
    // e.target.innerHTML = e.target.textContent
    const stimer = this.state.timer;
    handleChangeAssistValue&&handleChangeAssistValue(text,idx);
    //右侧推送--延时推送
    clearTimeout(stimer);
    let timer = setTimeout(function(){
      handlePush&&handlePush({mode:9});
      clearTimeout(stimer);
    },config.delayPushTime);
    if(text.trim() != '' && text != '<br>'){
      e.target.nextSibling.innerText?(e.target.nextSibling.innerText = ''):(e.target.nextSibling.innerHTML = '')
    }else{
      e.target.nextSibling.innerText?(e.target.nextSibling.innerText = '报告描述或意见'):(e.target.nextSibling.innerHTML = '报告描述或意见')
    }
    $(".TextareaRsize").css({marginTop:0});
    this.setState({
      timer
    });
  }
  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){
      this.$dom.current.innerText?(this.$dom.current.innerText = next.value||'') : (this.$dom.current.innerHTML = next.value||'')
      if(next.value && next.value.trim()){
        this.$dom.current.nextSibling.innerText = ''
      }else{
        this.$dom.current.nextSibling.innerHTML = '报告描述或意见'
      }
    }
  }
  componentDidMount(){
    const {value} = this.props;
    if(value && value.trim()){
      this.$dom.current.innerText?(this.$dom.current.innerText = value) : (this.$dom.current.innerHTML = value)
      this.$dom.current.nextSibling.innerText?(this.$dom.current.nextSibling.innerText = ''):(this.$dom.current.nextSibling.innerHTML = '')
    }else{
      this.$dom.current.nextSibling.innerText?(this.$dom.current.nextSibling.innerText = '报告描述或意见'):(this.$dom.current.nextSibling.innerHTML = '报告描述或意见')
    }
    const that = this;
    let txt = '';
    //黏贴时去掉html格式
    $(this.$dom.current).on("paste",function(e){
      setTimeout(function(){
        txt = that.$dom.current.innerText||that.$dom.current.innerHTML;
        that.$dom.current.innerHTML = txt;
        moveEnd($(that.$dom.current)[0]);     //光标落到最后去
      });
    })
  }
  componentWillUnmount(){
    $(this.$dom.current).off("paste");
  }
  handleFocus(){     //ie8下提示语挡住输入框，导致输入框无法聚焦
    store.dispatch(embedPush({
      action: "pacs",
      mode: 1
    }))
    this.textInput.current.previousSibling.focus();
  }
  render() {
    const {idx,disabled} = this.props;
    return (
      <div className={style.textWap}>
        <div className={`${style.divTextarea} ${setFontColorSize(2)}`}
            contenteditable={disabled?false:true}
            ref={this.$dom}
            onInput={this.handleInput}
            onKeyUp={this.handleInput}
        ></div>
        <p ref={this.textInput} onClick={this.handleFocus} className={`${style.textareaWarring} ${setFontColorSize(2)}`}></p>
      </div>
    );
  }
}
Textarea.contextTypes = {
  scrollArea: React.PropTypes.object
};
export default Textarea;