摘要：頁面顯示效果點(diǎn)擊編輯顯示效果由于項(xiàng)目頻繁修改相關(guān)信息，并多帶帶提交，為了方便，封裝了一個(gè)簡單的組件組件依賴用到了圖標(biāo)和組件這不用可以省略組件寬高顯示為自適應(yīng)控制父級(jí)大小即可，類型可無限擴(kuò)展輸入框修改組件接收參數(shù)展示內(nèi)容展示字體大小圖標(biāo)顏色輸入

頁面顯示效果

點(diǎn)擊編輯顯示效果

由于項(xiàng)目頻繁修改相關(guān)信息，并多帶帶提交，為了方便，封裝了一個(gè)簡單的組件組件依賴antd(用到了圖標(biāo)和Input組件這不用可以省略)組件寬高顯示為自適應(yīng)控制父級(jí)大小即可，類型可無限擴(kuò)展

/**

輸入框修改組件接收參數(shù)：

value: 展示內(nèi)容

fontSize: 展示字體大小

iconColor: 圖標(biāo)顏色

inputWidth: 輸入框?qū)挾?默認(rèn)100px

showSize: 最多顯示的字?jǐn)?shù)

type: (string) number、url、可不傳不做限制

required: true為必填

amount: 字?jǐn)?shù)最大限制

name: 為字段名

id: 需要的id

idName: id的字段名

handleDelete(): 刪除回調(diào)

handleOk(): 點(diǎn)擊對(duì)號(hào)回調(diào)

**/

調(diào)用代碼

fontSize="14px"            //顯示字體大小
iconColor="#5f68ea"        //鼠標(biāo)滑過icon圖標(biāo)顏色
inputWidth="400px"         //輸入框?qū)挾?，高度自適應(yīng)
showSize="30"              //可展示字?jǐn)?shù)，溢出隱藏，滑過展示全部
amount="30"                //字?jǐn)?shù)限制長度
type="number"              //可輸入類型
handleOk={this.handleOk}   //點(diǎn)擊對(duì)號(hào)回調(diào)
value="17600381667"        //傳入內(nèi)容
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框回顯字段
    }
}
//點(diǎn)擊展示輸入框
handleChangeClick = () => {
  this.setState({
      showInput:true
  })
};
//點(diǎn)擊關(guān)閉輸入框
handleCloseClick = () => {
    this.setState({
        showInput:!this.state.showInput
    })
};
//去空格
trim = (str) => {
    return str.replace(/^(s|u00A0)+/,"").replace(/(s|u00A0)+$/,"");
};
//點(diǎn)擊確定按鈕
handleAffirmClick = () => {

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

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

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

    //判斷字?jǐn)?shù)長度
    if(this.trim(this.state.valueCon).length>this.props.amount){
        message.error(`字?jǐn)?shù)不得超過${this.props.amount}個(gè)字`);
        return false
    }



    //回調(diào)確定方法
    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);

    //關(guān)閉輸入框
    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 (
        

            {!this.state.showInput?
                

                    
                        {showSize&&value.length>showSize?
                            
                                 {value.slice(0,showSize)+"..."}
                             :value
                        }
                        
                        {this.props.handleDelete&&
                        
                        }
                    

                
                :
                

                    

                        
                    
                    

                        
                        
                    
                
            }
        

    )
}

}

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;

}
}