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

背景

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

代码编写

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

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

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

效果展示

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

再看看表格中如何使用

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

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

最后

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

相关推荐
奇怪的前端717 小时前
Alien-Signals 响应式系统
前端·vue.js
你单排吧17 小时前
Electron打包图标修改失败问题
前端
@AfeiyuO17 小时前
vue3 实现将页面生成 pdf 导出(html2Canvas + jspdf)
前端·pdf·vue
太空游走的鱼17 小时前
Vue3 + Vite + Element Plus web转为 Electron 应用,解决无法登录、隐藏自定义导航栏
javascript·electron·vue3·管理系统·element plsu
华仔啊17 小时前
Vue 的 DOM 更新竟然是异步的?90%的人没有搞懂 nextTick
前端·vue.js
Cyann17 小时前
Day1- React基础组件使用
前端·react.js
GISer_Jing17 小时前
Next系统学习(二)
前端·javascript·node.js
BillKu18 小时前
vue3 中 npm install mammoth 与 npm install --save mammoth 的主要区别说明
前端·npm·node.js
织_网18 小时前
Electron 核心模块速查表
javascript·electron·策略模式
Ankle18 小时前
vue3 父子组件v-model传值方法总结
前端·vue.js