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

背景

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

代码编写

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

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

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

效果展示

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

再看看表格中如何使用

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

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

最后

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

相关推荐
烛阴5 分钟前
非空断言完全指南:解锁TypeScript/JavaScript的安全导航黑科技
前端·javascript
鱼樱前端9 分钟前
2025前端人一文看懂 window.postMessage 通信
前端·vue.js
快乐点吧23 分钟前
【前端】异步任务风控验证与轮询机制技术方案(通用笔记版)
前端·笔记
pe7er1 小时前
nuxtjs+git submodule的微前端有没有搞头
前端·设计模式·前端框架
七月的冰红茶1 小时前
【threejs】第一人称视角之八叉树碰撞检测
前端·threejs
爱掉发的小李1 小时前
前端开发中的输出问题
开发语言·前端·javascript
Dolphin_海豚1 小时前
一文理清 node.js 模块查找策略
javascript·后端·前端工程化
祝余呀2 小时前
HTML初学者第四天
前端·html
浮桥3 小时前
vue3实现pdf文件预览 - vue-pdf-embed
前端·vue.js·pdf
七夜zippoe3 小时前
前端开发中的难题及解决方案
前端·问题