newICSS/src/components/AddInspect/InspectName/index.jsx

import React, { Component } from "react";
import styles from "./index.less";
import edit1 from "@common/images/edit1.png";
import edit2 from "@common/images/edit2.png";
import { normalVal, timestampToTime, getStatusImg,setFontColorSize } from '@utils/tools';
class InspectName extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isEdit: false,
      value:''
    };
    this.handleInput = this.handleInput.bind(this)
    this.handleBlur = this.handleBlur.bind(this)
    this.handleEdit = this.handleEdit.bind(this)
  }
  componentDidMount(){
    const {item} = this.props
    this.setState({
      value:item.inpValue,
      isEdit:item.inpValue?true:false
    });
    if(this.refs.iptTip){
      this.refs.iptTip.getDOMNode().value = item.inpValue
    }
  }
  handleEdit(){
    this.setState({
      isEdit:true
    },()=>{
      this.refs.iptTip.getDOMNode().focus()
    })
  }
  handleBlur(){
    let val = this.state.value
    if (val) return
    this.setState({
      isEdit:false
    })
  }
  handleInput(e){
    const {setTipValue,idx} = this.props
    this.setState({
      value:e.target.value
    })
    this.props.setTipValue(idx,e.target.value)
  }
  render(){
    const {item,getInfomation,idx,handleLabelSub} = this.props
    return item.show ? <p className={styles.staticTagActive}>
        <span className={`${styles.tagSpan} ${styles.selectTagSpan} ${setFontColorSize(2,6)}`} data-flg="current" onClick={(e)=>handleLabelSub(e,item.questionId,idx)}>
          {item.name}
          <span className={styles.imgInfo1} title='点击i图标可查看详细说明' onClick={()=>getInfomation({name:item.uniqueName || '', position: 1, type: 12})}></span>
        </span>
        {
          item.inpValue||this.state.isEdit?<div title={this.state.value} className={styles.iptTipWrap} onClick={this.handleEdit}>
            <input 
            ref="iptTip"
            onBlur={this.handleBlur}
            onInput={this.handleInput}
            className={styles.iptValue}
            type="text"/>
            <span></span>
          </div>:<span className={styles.iptValueBtn} onClick={this.handleEdit}>点击备注</span>
        }
    </p>:
    <p >
        <i className={`${styles.tagSpan} ${styles.tagSpanS} ${setFontColorSize(2)}`} data-flg="current" onClick={(e)=>handleLabelSub(e,item.questionId,idx)}>
          {item.name}
          <span className={styles.imgInfo} title='点击i图标可查看详细说明' onClick={()=>getInfomation({name:item.uniqueName || '', position: 1, type: 12})}></span>
        </i>
    </p>
  }
}
export default InspectName;