antd实现点击按钮隐藏输入框_react-鼠标滑过显示编辑按钮点击显示输入框编辑内容...

页面显示效果

点击编辑显示效果

由于项目频繁修改相关信息，并单独提交，为了方便，封装了一个简单的组件组件依赖antd(用到了图标和Input组件这不用可以省略)组件宽高显示为自适应控制父级大小即可，类型可无限扩展

/**

输入框修改组件接收参数：

value: 展示内容

fontSize: 展示字体大小

iconColor: 图标颜色

inputWidth: 输入框宽度 默认100px

showSize: 最多显示的字数

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

required: true为必填

amount: 字数最大限制

name: 为字段名

id: 需要的id

idName: id的字段名

handleDelete(): 删除回调

handleOk(): 点击对号回调

**/

调用代码

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 defa