基于react封装一个通用可编辑组件
作者：西檬
前段时间接到这样一个需求,需要封装一个组件实现可编辑,这个到底有多通用呢,就是需要在普通的文字展示包括表格,列表等等,所以本文将给大家介绍如何基于react封装一个通用可编辑组件,需要的朋友可以参考下
背景
前段时间接到这样一个需求，需要封装一个组件实现可编辑，这个到底有多通用呢，就是需要在普通的文字展示包括表格，列表等等，有这样的需求都可以调这个组件。我们的项目技术栈是umijs+antd,所以我直接利用antd的组件实现可编辑。
代码编写
代码其实很简单，主要就是renderValue,renderInput,onSave这三个方法,来说说这三个方法分别干了什么事
renderValue: 直接渲染组件的方法(主要是渲染值，不过也可以渲染组件) renderInput: 渲染可编辑的组件(这里的可编辑组件不只是input，还可以是select等等，总之表单元素都可以)
onSave: 编辑之后需要保存，这个就是保存后会触发的方法,一般来说保存后肯定会请求接口，执行异步方法，我这里就封成异步函数了
效果展示
这里我就先拿一个简单例子展示用法
再看看表格中如何使用
核心在于在columns里面的render可以自定义组件，这样就可以将我们的可编辑组件放进去
因为我这里没有去模拟请求，数据都是mock的，表格的字段没有更新，但是能拿到更新之后的数据，然后我们去请求接口将它传过去即可，这样我们的一个可编辑组件就写好了，个人感觉比antd表格的那个可编辑单元格要好理解很多，对于大家有定制化需求，可以自行拓展，也算给大家一个思路。
最后
以上就是基于react封装一个通用可编辑组件的详细内容，更多关于react封装编辑组件的资料请关注脚本之家其它相关文章！