react-鼠標滑過顯示編輯按鈕點擊顯示輸入框編輯內容

頁面顯示效果

點擊編輯顯示效果

因爲項目頻繁修改相關信息，並單獨提交，爲了方便，封裝了一個簡單的組件組件依賴antd(用到了圖標和Input組件這不用能夠省略)組件寬高顯示爲自適應控制父級大小便可，類型可無限擴展

/**

• 輸入框修改組件接收參數：
• value: 展現內容
• fontSize: 展現字體大小
• iconColor: 圖標顏色
• inputWidth: 輸入框寬度 默認100px
• showSize: 最多顯示的字數
• type: (string) number、url、可不傳不作限制
• required: true爲必填
• amount: 字數最大限制
• name: 爲字段名
• id: 須要的id
• idName: id的字段名
• handleDelete(): 刪除回調
• handleOk(): 點擊對號回調

**/

調用代碼
<ChangeInput

fontSize='14px'            //顯示字體大小
iconColor="#5f68ea"        //鼠標滑過icon圖標顏色
inputWidth="400px"         //輸入框寬度，高度自適應
showSize="30"              //可展現字數，溢出隱藏，滑過展現所有
amount="30"                //字數限制長度
type="number"              //可輸入類型
handleOk={this.handleOk}   //點擊對號回調
value="17600381667"        //傳入內容
name="firmFax"             //地段名

/>

組件代碼：

import React from 'react';
import {Icon, Input, message, Tooltip} from 'antd';

export default class ChangeInput extends React.Component {

constructor(props) {
    super(props);
    this.state = {
        showInput:false,     //輸入框顯示隱藏
        valueCon:'',         //input框回顯字段
    }
}
//點擊展現輸入框
handleChangeClick = () => {
  this.setState({
      showInput:true
  })
};
//點擊關閉輸入框
handleCloseClick = () => {
    this.setState({
        showInput:!this.state.showInput
    })
};
//去空格
trim = (str) => {
    return str.replace(/^(\s|\u00A0)+/,'').replace(/(\s|\u00A0)+$/,'');
};
//點擊肯定按鈕
handleAffirmClick = () => {

    //判斷不爲空
    if(this.props.required&&this.trim(this.state.valueCon)===''||this.props.required&&this.trim(this.state.valueCon)==='-') {
        message.error(`此字段不能爲空及特殊字符'-'`);
        return false
    }

    //判斷爲數字
    if(this.props.type&&this.props.type==="number"&&isNaN(this.trim(this.state.valueCon))) {
        message.error(`請輸入數字`);
        return false
    }

    //判斷網址
    let reg=/^\\{2}[\w-]+\\(([\w-][\w-\s]*[\w-]+[$$]?$)|([\w-][$$]?$))/;
    if(this.props.type&&this.props.type==="url"&&!reg.test(this.props.valueCon)){
        message.error("這網址不是以http://https://開頭，或者不是網址！");
        return false
    }

    //判斷字數長度
    if(this.trim(this.state.valueCon).length>this.props.amount){
        message.error(`字數不得超過${this.props.amount}個字`);
        return false
    }



    //回調肯定方法
    let obj = {};
    // obj.value = this.state.valueCon;
    // obj.label = this.props.name;
    obj[ this.props.name] = this.state.valueCon;
    //判斷是否須要id
    if(this.props.idName){
        obj[this.props.idName] = this.props.id;
    }
    this.props.handleOk(obj);

    //關閉輸入框
    this.setState({
        showInput:this.props.isShow
    })
};
//input改變
handleChange = (e) => {
    console.log(e.target.value);
    this.setState({
        valueCon:e.target.value
    })
};
componentDidMount() {
    this.setState({
        valueCon:this.props.value,
    })
}
handleDeleteClick = () =>{
    let obj = {};
    // obj.value = this.state.valueCon;
    // obj.label = this.props.name;
    obj[ this.props.name] = this.state.valueCon;
    //判斷是否須要id
    if(this.props.idName){
        obj[this.props.idName] = this.props.id;
    }
    this.props.handleDelete(obj);
};

render() {
    const {value,fontSize,iconColor,inputWidth,showSize} = this.props;

    console.log(value)

    return (
        <div>
            {!this.state.showInput?
                <div className="change_input">
                    <span className="change_input_name"  style={{fontSize:fontSize}} >
                        {showSize&&value.length>showSize?
                            <Tooltip title={value}>
                                 <span>{value.slice(0,showSize)+"..."}</span>
                            </Tooltip> :value
                        }
                        <Icon type="edit"
                              style={{color:iconColor}}
                              className="change_input_hide_change"
                              onClick={this.handleChangeClick}
                        />
                        {this.props.handleDelete&&
                        <Icon type="delete"
                              style={{color:iconColor}}
                              className="change_input_hide_change"
                              onClick={this.handleDeleteClick}
                        />
                        }
                    </span>

                </div>
                :
                <div className="write_input">
                    <div className="write_input_name" style={{width:inputWidth?inputWidth:'100px'}}>
                        <Input placeholder="請輸入"
                               defaultValue={this.props.value==='-'?'':this.props.value}
                               onChange={this.handleChange}
                               style={{height:'25px',margin:'0'}}
                        />
                    </div>
                    <div className="write_input_hide" style={{color:iconColor}}>
                        <Icon type="check-circle" className="write_input_hide_yes" onClick={this.handleAffirmClick}/>
                        <Icon type="close-circle" className="write_input_hide_no" onClick={this.handleCloseClick} />
                    </div>
                </div>
            }
        </div>

    )
}

}

css代碼

.change_input{
width: 100%;
//background: slateblue;
height: 100%;
overflow: hidden;
word-break: break-all;
.change_input_name{

//float: left;
.change_input_hide_change{
  margin-left: 5px;
  cursor: pointer;
  display: none;
}

}
&:hover{

.change_input_name{
  .change_input_hide_change{
    display: inline-block;
  }
}

}
}
.write_input{
height: 100%;
overflow: hidden;
.write_input_name{

//height: 98%;
float: left;

}
.write_input_hide{

height: 100%;
float: left;
//background: seagreen;
.write_input_hide_yes{
  margin-left: 5px;
}
.write_input_hide_no{
  margin-left: 5px;
}
//width: 100px;

}}