react封装一个通用可编辑组件

背景

前段时间接到这样一个需求,需要封装一个组件实现可编辑,这个到底有多通用呢,就是需要在普通的文字展示包括表格,列表等等,有这样的需求都可以调这个组件。我们的项目技术栈是umijs+antd,所以我直接利用antd的组件实现可编辑。

代码编写

代码其实很简单,主要就是renderValue ,renderInput ,onSave这三个方法,来说说这三个方法分别干了什么事

renderValue: 直接渲染组件的方法(主要是渲染值,不过也可以渲染组件) renderInput: 渲染可编辑的组件(这里的可编辑组件不只是input,还可以是select等等,总之表单元素都可以)

onSave: 编辑之后需要保存,这个就是保存后会触发的方法,一般来说保存后肯定会请求接口,执行异步方法,我这里就封成异步函数了

效果展示

这里我就先拿一个简单例子展示用法

再看看表格中如何使用

核心在于在columns里面的render可以自定义组件,这样就可以将我们的可编辑组件放进去

因为我这里没有去模拟请求,数据都是mock的,表格的字段没有更新,但是能拿到更新之后的数据,然后我们去请求接口将它传过去即可,这样我们的一个可编辑组件就写好了,个人感觉比antd表格的那个可编辑单元格要好理解很多,对于大家有定制化需求,可以自行拓展,也算给大家一个思路。

最后

最后提前祝大家新年快乐,新一年bug走开,女朋友走来

相关推荐
小镇程序员6 分钟前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js
野槐8 分钟前
前端图像处理(一)
前端
程序猿阿伟16 分钟前
《智能指针频繁创建销毁:程序性能的“隐形杀手”》
java·开发语言·前端
疯狂的沙粒17 分钟前
对 TypeScript 中函数如何更好的理解及使用?与 JavaScript 函数有哪些区别?
前端·javascript·typescript
瑞雨溪26 分钟前
AJAX的基本使用
前端·javascript·ajax
力透键背29 分钟前
display: none和visibility: hidden的区别
开发语言·前端·javascript
程楠楠&M40 分钟前
node.js第三方Express 框架
前端·javascript·node.js·express
weiabc40 分钟前
学习electron
javascript·学习·electron
盛夏绽放1 小时前
Node.js 和 Socket.IO 实现实时通信
前端·后端·websocket·node.js
想自律的露西西★1 小时前
用el-scrollbar实现滚动条,拖动滚动条可以滚动,但是通过鼠标滑轮却无效
前端·javascript·css·vue.js·elementui·前端框架·html5