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

背景

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

代码编写

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

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

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

效果展示

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

再看看表格中如何使用

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

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

最后

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

相关推荐
光影少年5 分钟前
angular生态及学习路线
前端·学习·angular.js
記億揺晃着的那天2 小时前
Vue + Element UI 表格自适应高度如何做?
javascript·vue.js·ui
无尽夏_2 小时前
HTML5(前端基础)
前端·html·html5
Jagger_2 小时前
敏捷开发流程-精简版
前端·后端
FIN66683 小时前
昂瑞微冲刺科创板:创新驱动,引领射频芯片国产化新征程
前端·安全·前端框架·信息与通信·芯片
GISer_Jing3 小时前
ByteDance——jy真题
前端·javascript·面试
睡美人的小仙女1273 小时前
浏览器为何屏蔽本地文件路径?
前端
真的想不出名儿3 小时前
Vue 中 props 传递数据的坑
前端·javascript·vue.js
FIN66683 小时前
昂瑞微:深耕射频“芯”赛道以硬核实力冲刺科创板大门
前端·人工智能·科技·前端框架·信息与通信·智能
阳光阴郁大boy3 小时前
星座运势网站技术解析:从零打造现代化Web应用
前端·javascript