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