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

import React,{Component} from 'react';
import style from './index.less';
import {isIE,handleEnter} from '@utils/tools.js';
import $ from 'jquery';
/***
 * author:zn@2018-11-13
 * 电子病历项内容框
 * 接收参数：
 * boxHeight：框高度
 * boxWidth：框宽度
 * title：框名称（如主诉、现病史）
 * editable：是否可编辑
 * children：框内内容
 * border:边框样式,
 * style
 *
 * ***/
class ItemBox extends Component {
  constructor(props){
    super(props);
    this.$div = React.createRef();
    this.handleClick = this.handleClick.bind(this);
    this.handleInput = this.handleInput.bind(this);
  }
  getBoxStyle(){
    const {boxHeight,boxWidth,boxLineHeight,marginTop,backgroundColor} = this.props;
    return {width:boxWidth?boxWidth:undefined,height:boxHeight?boxHeight:undefined,lineHeight:boxLineHeight?boxLineHeight:'22px',marginTop:marginTop,backgroundColor:backgroundColor?backgroundColor:''};
  }

  handleClick(e){
    const {handleClick} = this.props;
    handleClick && handleClick(e);//为了获取鼠标位置，显示搜索结果框；
  }
  handleInput(e){
    const {onchange,data} = this.props;
    if(!data || (data.length==0)){//避免结构化下触发onchange，导致下拉要点两下
      onchange&&onchange(e)
    }
  }

  /*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(){
    if(isIE()){
      $(this.$div.current).onIe8Input(function(e){
        this.handleInput(e)
      },this);
    }
  }

  render(){
    const {title,children,editable,className,handleFocus,onchange,fuzhen,border,handleBlur,titleTop,backgroundColor,boxId} = this.props;
    return <div className={style["box"]+" "+"clearfix"} >
      <div className={style["title"] + ' '+(className||'')} style={{marginTop:titleTop?'22px':''}}>{title}</div>
      <div ref={this.$div} className={`${style["content"]} ${border?style["border"]:''} ${backgroundColor?style["noBorder"]:''}`} contentEditable={editable} style={this.getBoxStyle()} onFocus={handleFocus} onInput={this.handleInput} onClick={(e)=>{this.handleClick(e);}} onBlur={handleBlur} id={boxId} onkeydown={handleEnter}>
        {fuzhen?children||fuzhen:children}
      </div>
    </div>
  }
}

export default ItemBox;