基于react封装一个通用可编辑组件
更新时间：2024年02月01日 08:37:59 作者：西檬
前段时间接到这样一个需求,需要封装一个组件实现可编辑,这个到底有多通用呢,就是需要在普通的文字展示包括表格,列表等等,所以本文将给大家介绍如何基于react封装一个通用可编辑组件,需要的朋友可以参考下
背景
前段时间接到这样一个需求，需要封装一个组件实现可编辑，这个到底有多通用呢，就是需要在普通的文字展示包括表格，列表等等，有这样的需求都可以调这个组件。我们的项目技术栈是umijs+antd,所以我直接利用antd的组件实现可编辑。
代码编写
代码其实很简单，主要就是renderValue,renderInput,onSave这三个方法,来说说这三个方法分别干了什么事
renderValue: 直接渲染组件的方法(主要是渲染值，不过也可以渲染组件) renderInput: 渲染可编辑的组件(这里的可编辑组件不只是input，还可以是select等等，总之表单元素都可以)
onSave: 编辑之后需要保存，这个就是保存后会触发的方法,一般来说保存后肯定会请求接口，执行异步方法，我这里就封成异步函数了
效果展示
这里我就先拿一个简单例子展示用法
再看看表格中如何使用
核心在于在columns里面的render可以自定义组件，这样就可以将我们的可编辑组件放进去
因为我这里没有去模拟请求，数据都是mock的，表格的字段没有更新，但是能拿到更新之后的数据，然后我们去请求接口将它传过去即可，这样我们的一个可编辑组件就写好了，个人感觉比antd表格的那个可编辑单元格要好理解很多，对于大家有定制化需求，可以自行拓展，也算给大家一个思路。
最后
以上就是基于react封装一个通用可编辑组件的详细内容，更多关于react封装编辑组件的资料请关注脚本之家其它相关文章！
相关文章
ahooks useVirtualList 封装虚拟滚动列表
这篇文章主要为大家介绍了ahooks useVirtualList 封装虚拟滚动列表详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
React Grid Layout是一个用于在React应用程序中创建可拖拽和可调整大小的网格布局的库,通过使用React Grid Layout,我们可以轻松地创建自适应的网格布局,并实现拖拽和调整大小的功能,本文介绍了React Grid Layout的基础使用方法,感兴趣的朋友一起看看吧2024-02-02
这篇文章主要为大家详细介绍了React如何利用lazy+Suspense实现路由懒加载，文中的示例代码简洁易懂，感兴趣的小伙伴可以跟随小编一起了解一下2023-06-06
react-native使用leanclound消息推送的方法
这篇文章主要介绍了react-native使用leanclound消息推送的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-08-08
本文主要介绍了React19 Diff 算法的具体实现,该算法用于高效地更新虚拟DOM,它通过优化传统树diff算法,将复杂度从O(n^3)降低到O(n),感兴趣的可以了解一下2026-05-05
前端应用大多数是SPA（单页应用程序），也就是只有一个HTML页面的应用程序。因为它的用户体验更好、对服务器压力更小，所以更受欢迎。为了有效的使用单个页面来管理多页面的功能，前端路由应运而生2022-09-09
这篇文章主要介绍了如何对react hooks进行单元测试的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-08-08
electron其实是一个桌面应用程序，不是一个标准的前端web程序，所有没有什么请求的发生，控制台network看不到请求，而是只能通过console.log去打印查看，而且通信协议使用的不是http而是gRPC协议，这篇文章主要介绍了Electron+React如何进行通信,需要的朋友可以参考下2022-06-06
这篇文章主要为大家介绍了react-native只保留3x图原理解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-01-01
React关于antd table中select的设值更新问题
这篇文章主要介绍了React关于antd table中select的设值更新问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
最新评论