react鼠标滑过显示编辑按钮点击显示输入框编辑内容

jiezi

6 年前

页面显示效果

点击编辑显示效果

由于项目频繁修改相关信息，并单独提交，为了方便，封装了一个简单的组件组件依赖 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;

}
}