基于react封裝一個通用可編輯組件
背景
前段時間接到這樣一個需求，需要封裝一個組件實現(xiàn)可編輯，這個到底有多通用呢，就是需要在普通的文字展示包括表格，列表等等，有這樣的需求都可以調(diào)這個組件。我們的項目技術(shù)棧是umijs+antd,所以我直接利用antd的組件實現(xiàn)可編輯。
代碼編寫
代碼其實很簡單，主要就是renderValue,renderInput,onSave這三個方法,來說說這三個方法分別干了什么事
renderValue: 直接渲染組件的方法(主要是渲染值，不過也可以渲染組件) renderInput: 渲染可編輯的組件(這里的可編輯組件不只是input，還可以是select等等，總之表單元素都可以)
onSave: 編輯之后需要保存，這個就是保存后會觸發(fā)的方法,一般來說保存后肯定會請求接口，執(zhí)行異步方法，我這里就封成異步函數(shù)了
效果展示
這里我就先拿一個簡單例子展示用法
再看看表格中如何使用
核心在于在columns里面的render可以自定義組件，這樣就可以將我們的可編輯組件放進去
因為我這里沒有去模擬請求，數(shù)據(jù)都是mock的，表格的字段沒有更新，但是能拿到更新之后的數(shù)據(jù)，然后我們?nèi)フ埱蠼涌趯⑺鼈鬟^去即可，這樣我們的一個可編輯組件就寫好了，個人感覺比antd表格的那個可編輯單元格要好理解很多，對于大家有定制化需求，可以自行拓展，也算給大家一個思路。
最后
以上就是基于react封裝一個通用可編輯組件的詳細內(nèi)容，更多關(guān)于react封裝編輯組件的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
ahooks useVirtualList 封裝虛擬滾動列表
這篇文章主要為大家介紹了ahooks useVirtualList 封裝虛擬滾動列表詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
React Grid Layout基礎(chǔ)使用示例教程
React Grid Layout是一個用于在React應(yīng)用程序中創(chuàng)建可拖拽和可調(diào)整大小的網(wǎng)格布局的庫,通過使用React Grid Layout,我們可以輕松地創(chuàng)建自適應(yīng)的網(wǎng)格布局,并實現(xiàn)拖拽和調(diào)整大小的功能,本文介紹了React Grid Layout的基礎(chǔ)使用方法,感興趣的朋友一起看看吧2024-02-02
React利用lazy+Suspense實現(xiàn)路由懶加載
這篇文章主要為大家詳細介紹了React如何利用lazy+Suspense實現(xiàn)路由懶加載，文中的示例代碼簡潔易懂，感興趣的小伙伴可以跟隨小編一起了解一下2023-06-06
react-native使用leanclound消息推送的方法
這篇文章主要介紹了react-native使用leanclound消息推送的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
本文主要介紹了React19 Diff 算法的具體實現(xiàn),該算法用于高效地更新虛擬DOM,它通過優(yōu)化傳統(tǒng)樹diff算法,將復(fù)雜度從O(n^3)降低到O(n),感興趣的可以了解一下2026-05-05
前端應(yīng)用大多數(shù)是SPA（單頁應(yīng)用程序），也就是只有一個HTML頁面的應(yīng)用程序。因為它的用戶體驗更好、對服務(wù)器壓力更小，所以更受歡迎。為了有效的使用單個頁面來管理多頁面的功能，前端路由應(yīng)運而生2022-09-09
這篇文章主要介紹了如何對react hooks進行單元測試的方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
electron其實是一個桌面應(yīng)用程序，不是一個標準的前端web程序，所有沒有什么請求的發(fā)生，控制臺network看不到請求，而是只能通過console.log去打印查看，而且通信協(xié)議使用的不是http而是gRPC協(xié)議，這篇文章主要介紹了Electron+React如何進行通信,需要的朋友可以參考下2022-06-06
這篇文章主要為大家介紹了react-native只保留3x圖原理解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-01-01
React關(guān)于antd table中select的設(shè)值更新問題
這篇文章主要介紹了React關(guān)于antd table中select的設(shè)值更新問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03