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

import React,{Component} from 'react';
import style from './index.less';
/***
 * author:zn@2018-11-13
 * 电子病历项内容框
 * 接收参数：
 * boxHeight：框高度
 * boxWidth：框宽度
 * title：框名称（如主诉、现病史）
 * editable：是否可编辑
 * children：框内内容
 * border:边框样式,
 * style
 *
 * ***/
class ItemBox extends Component {
  constructor(props){
    super(props);
    this.handleClick = this.handleClick.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);//为了获取鼠标位置，显示搜索结果框；
  }

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

export default ItemBox;