table,的输入框改变js组件

 

/*
使用方式如下，与DateEdit使用方式基本一致
1、引用组件
2、 <TableDateEdit
        key={record.id + 'start'}                   //key随意指定
        txtValue={record.planStartTime}             //控件需要显示的内容
        rowID={record.id}                           //要更新的数据id
        txtChange={this.txtChange}        //更新数据执行的方法，方法名称随意指定
    />
3、txtChange = (id, value) => {}        //包含两个参数：id需要更新的数据id，value需要更新的数据值
*/
import React,{Fragment} from 'react';
import { Input } from 'antd';
class TableInputEdit extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            edit:false
        };
    }

    //文本框的值变化
    onInputChange=(event)=>{
      const { rowID,txtChange } = this.props;
      txtChange(rowID,event.target.value);
      this.setState({edit:false});
    }

    onSpanClick=()=>{
      this.setState({edit:true});
    }

    componentDidUpdate(){
      const { input } = this.refs.txtInput; 
      input.focus();  //当元素获得焦点时（当通过鼠标点击选中元素或通过 tab 键定位到元素时），发生 focus 事件。
    }

    render() {
        const { txtValue } = this.props; //传入的值
        const { edit } = this.state;//控制是否编辑
        let inputStyle=edit?{display:'block'}:{display:'none'};
        let spanStyle=edit?{display:'none'}:{cursor:"pointer",display:"block",minWidth:"30px",minHeight:"20px",overflow:"hidden",
        whiteSpace:"nowrap",textOverflow:"ellipsis"};
          return (
            <Fragment>
              <Input ref="txtInput" 
                  defaultValue={txtValue} 
                  onPressEnter={this.onInputChange}  //按下回车的回调
                  onBlur={this.onInputChange} //onblur 事件会在对象失去焦点时发生。
                  style={inputStyle} //控制显隐
                  />
              <span 
                  style={spanStyle} 
                  onClick={this.onSpanClick}  //点击触发
                  >{txtValue}</span>
            </Fragment>
            );
        
    }
}

export default TableInputEdit;