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

背景

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

代码编写

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

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

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

效果展示

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

再看看表格中如何使用

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

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

最后

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

相关推荐
熊的猫29 分钟前
JS 中的类型 & 类型判断 & 类型转换
前端·javascript·vue.js·chrome·react.js·前端框架·node.js
瑶琴AI前端1 小时前
uniapp组件实现省市区三级联动选择
java·前端·uni-app
会发光的猪。1 小时前
如何在vscode中安装git详细新手教程
前端·ide·git·vscode
别拿曾经看以后~2 小时前
【el-form】记一例好用的el-input输入框回车调接口和el-button按钮防重点击
javascript·vue.js·elementui
我要洋人死2 小时前
导航栏及下拉菜单的实现
前端·css·css3
川石课堂软件测试2 小时前
性能测试|docker容器下搭建JMeter+Grafana+Influxdb监控可视化平台
运维·javascript·深度学习·jmeter·docker·容器·grafana
科技探秘人2 小时前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人2 小时前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR2 小时前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香2 小时前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel