码迷,mamicode.com
首页 > Web开发 > 详细

table,的输入框改变js组件

时间:2020-09-24 21:58:49      阅读:54      评论:0      收藏:0      [点我收藏+]

标签:idt   pointer   width   struct   stat   bsp   显示   targe   输入框   

 

/*
使用方式如下,与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;

  

table,的输入框改变js组件

标签:idt   pointer   width   struct   stat   bsp   显示   targe   输入框   

原文地址:https://www.cnblogs.com/yuanjili666/p/13723677.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!