基于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封装编辑组件的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要介绍了React中遍历数组生成标签问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
在使用React搭建用户界面时,组件可以分为两类：受控组件和费受控组件这两种组件在数据处理方式上有着显著的差异,理解它们的区别对于构建高效和可控的React应用至关重要,本文将深入探讨这两种组件的定义、特点以及使用场景,并通过示例代码帮助你更加清晰地理解它们2025-01-01
react Input组件Compositionstart和Compositionend事件
这篇文章主要为大家介绍了Compositionstart和Compositionend事件之于react组件库Input组件的坑解决，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-11-11
React中的getDefaultProps功能允许开发者为类组件定义默认属性,提高组件的灵活性和容错性,本文介绍了getDefaultProps的作用、语法以及最佳实践,并探讨了其他替代方案,如函数组件中的默认参数、高阶组件和ContextAPI等,理解这些概念有助于提升代码的可维护性和用户体验2024-09-09
小编需要封装一个通过Popover弹出框里可以自定义渲染内容的组件，渲染内容暂时有: 单选框, 复选框，接下来通过本文给大家分享React封装CustomSelect组件思路,需要的朋友可以参考下2022-07-07
这篇文章主要为大家介绍了详解react express实现webssh demo解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-04-04
解决React报错Unexpected default export of an
这篇文章主要为大家介绍了React报错Unexpected default export of anonymous function解决方法，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-12-12
本文主要介绍了React服务端渲染和同构的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-04-04
React-Native实现ListView组件之上拉刷新实例（iOS和Android通用）
本篇文章主要介绍了React-Native实现ListView组件之上拉刷新实例（iOS和Android通用），具有一定的参考价值，有兴趣的可以了解一下2017-07-07
这篇文章主要为大家介绍了React Native 的动态列表方案探索示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
最新评论