基于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-10-10
state 中可以保存任意类型的JavaScript值，包括对象，但是，不应该直接修改存放在 React state 中的对象，这篇文章主要介绍了React 18更新state中的对象,需要的朋友可以参考下2023-08-08
本篇文章主要介绍了react实现菜单权限控制的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-12-12
React项目配置axios和反向代理和process.env环境配置等问题
这篇文章主要介绍了React项目配置axios和反向代理和process.env环境配置等问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
这篇文章主要介绍了深入浅析react native es6语法的相关资料,需要的朋友可以参考下2015-12-12
这篇文章主要为大家介绍了React可定制黑暗模式切换开关组件示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-10-10
这篇文章主要介绍了react中的ajax封装实例详解的相关资料,希望通过本文能帮助到大家，让大家理解掌握这部分内容，需要的朋友可以参考下2017-10-10
这篇文章主要为大家详细介绍了Mixin、HOC、Render Props、Hooks这四种组件间复用的方式，文中的示例代码讲解详细，感兴趣的小伙伴可以了解一下2023-06-06
这篇文章主要为大家分享了React Native验证码倒计时工具类，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-10-10
这篇文章主要介绍了react中使用ant组件库的modal弹窗报错问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-03-03
最新评论