react-鼠标悬停显示编辑按钮点击显示输入框编辑内容

页面展示效果点击编辑展示效果由于项目经常修改相关信息，单独提交，为了方便，封装了一个简单的组件。组件依赖于antd（使用了Icon和Input组件，不用的可以省略）。parent大小足够，type可以无限扩展/**输入框修改组件接收参数：value：显示内容fontSize：显示字体大小iconColor：图标颜色inputWidth：输入框宽度默认100pxshowSize：最大数量显示字符的类型：（字符串）数字，url，不能无限制地传递required：true是必需的amount：最大字数限制name：字段名id：必填ididName：id的字段名handleDelete()：删除回调handleOk():点击复选标记回调**/调用代码组件代码：从'react'导入React；从'antd'导入{Icon，Input，message，Tooltip}；导出默认类ChangeInputextendsReact.Component{constructor（props）{super（props）;this.state={showInput:false,//输入框显示和隐藏valueCon:'',//inputboxechofield}}//点击显示输入框handleChangeClick=()=>{this.setState({showInput:true})};//点击关闭输入框handleCloseClick=()=>{this.setState({showInput:!this.state.showInput})};//去掉空格trim=(str)=>{returnstr.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(`该字段不能为空和特殊字符'-'`);returnfalse}//判断为数字if(this.props.type&&this.props.type==="number"&&isNaN(this.trim(this.state.valueCon))){message.error(`请输入数字`);returnfalse}//判断URLletreg=/^\\{2}[\w-]+\\(([\w-][\w-\s]*[\w-]+[$$]?$)|([\w-][$$]?$))/;if(this.props.type&&this.props.type==="url"&&!reg.test(this.props.valueCon)){message.error("这个URL不是以http://https://开头,或不是网址！");returnfalse}//判断词长if(this.trim(this.state.valueCon).length>this.props.amount){message.error(`词数不能超过${this.props.amount}word`);returnfalse}//回调判断方法letobj={};//obj.value=this.state.valueCon;//obj.label=this.props.name;obj[this.props.name]=this.state.valueCon;//判断是否需要idif(this.props.idName){obj[this.props.idName]=this.props.id;}this.props.handleOk(obj);//关闭输入框this.setState({showInput:this.props.isShow})};//输入改变handleChange=(e)=>{console.log(e.target.value);this.setState({valueCon:e.target.value})};componentDidMount(){this.setState({valueCon:this.props.value,})}handleDeleteClick=()=>{letobj={};//obj.value=this.state.valueCon;//obj.label=this.props.name;obj[this.props.name]=this.state.valueCon;//判断是否需要idif(this.props.idName){对象[this.props.idName]=this.props.id;}this.props.handleDelete(obj);};render(){const{value,fontSize,iconColor,inputWidth,showSize}=this.props;console.log(value)返回(