基于react封裝一個(gè)通用可編輯組件
背景
前段時(shí)間接到這樣一個(gè)需求，需要封裝一個(gè)組件實(shí)現(xiàn)可編輯，這個(gè)到底有多通用呢，就是需要在普通的文字展示包括表格，列表等等，有這樣的需求都可以調(diào)這個(gè)組件。我們的項(xiàng)目技術(shù)棧是umijs+antd,所以我直接利用antd的組件實(shí)現(xiàn)可編輯。
代碼編寫
代碼其實(shí)很簡(jiǎn)單，主要就是renderValue,renderInput,onSave這三個(gè)方法,來(lái)說(shuō)說(shuō)這三個(gè)方法分別干了什么事
renderValue: 直接渲染組件的方法(主要是渲染值，不過(guò)也可以渲染組件) renderInput: 渲染可編輯的組件(這里的可編輯組件不只是input，還可以是select等等，總之表單元素都可以)
onSave: 編輯之后需要保存，這個(gè)就是保存后會(huì)觸發(fā)的方法,一般來(lái)說(shuō)保存后肯定會(huì)請(qǐng)求接口，執(zhí)行異步方法，我這里就封成異步函數(shù)了
效果展示
這里我就先拿一個(gè)簡(jiǎn)單例子展示用法
再看看表格中如何使用
核心在于在columns里面的render可以自定義組件，這樣就可以將我們的可編輯組件放進(jìn)去
因?yàn)槲疫@里沒(méi)有去模擬請(qǐng)求，數(shù)據(jù)都是mock的，表格的字段沒(méi)有更新，但是能拿到更新之后的數(shù)據(jù)，然后我們?nèi)フ?qǐng)求接口將它傳過(guò)去即可，這樣我們的一個(gè)可編輯組件就寫好了，個(gè)人感覺(jué)比antd表格的那個(gè)可編輯單元格要好理解很多，對(duì)于大家有定制化需求，可以自行拓展，也算給大家一個(gè)思路。
最后
以上就是基于react封裝一個(gè)通用可編輯組件的詳細(xì)內(nèi)容，更多關(guān)于react封裝編輯組件的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
React中遍歷數(shù)組生成標(biāo)簽問(wèn)題
這篇文章主要介紹了React中遍歷數(shù)組生成標(biāo)簽問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
在使用React搭建用戶界面時(shí),組件可以分為兩類：受控組件和費(fèi)受控組件這兩種組件在數(shù)據(jù)處理方式上有著顯著的差異,理解它們的區(qū)別對(duì)于構(gòu)建高效和可控的React應(yīng)用至關(guān)重要,本文將深入探討這兩種組件的定義、特點(diǎn)以及使用場(chǎng)景,并通過(guò)示例代碼幫助你更加清晰地理解它們2025-01-01
react Input組件Compositionstart和Compositionend事件
這篇文章主要為大家介紹了Compositionstart和Compositionend事件之于react組件庫(kù)Input組件的坑解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
React中g(shù)etDefaultProps的使用小結(jié)
React中的getDefaultProps功能允許開(kāi)發(fā)者為類組件定義默認(rèn)屬性,提高組件的靈活性和容錯(cuò)性,本文介紹了getDefaultProps的作用、語(yǔ)法以及最佳實(shí)踐,并探討了其他替代方案,如函數(shù)組件中的默認(rèn)參數(shù)、高階組件和ContextAPI等,理解這些概念有助于提升代碼的可維護(hù)性和用戶體驗(yàn)2024-09-09
小編需要封裝一個(gè)通過(guò)Popover彈出框里可以自定義渲染內(nèi)容的組件，渲染內(nèi)容暫時(shí)有: 單選框, 復(fù)選框，接下來(lái)通過(guò)本文給大家分享React封裝CustomSelect組件思路,需要的朋友可以參考下2022-07-07
react?express實(shí)現(xiàn)webssh?demo解析
這篇文章主要為大家介紹了詳解react?express實(shí)現(xiàn)webssh?demo解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04
解決React報(bào)錯(cuò)Unexpected default export of an
這篇文章主要為大家介紹了React報(bào)錯(cuò)Unexpected default export of anonymous function解決方法，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
React服務(wù)端渲染和同構(gòu)的實(shí)現(xiàn)
本文主要介紹了React服務(wù)端渲染和同構(gòu)的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04
React-Native實(shí)現(xiàn)ListView組件之上拉刷新實(shí)例（iOS和Android通用）
本篇文章主要介紹了React-Native實(shí)現(xiàn)ListView組件之上拉刷新實(shí)例（iOS和Android通用），具有一定的參考價(jià)值，有興趣的可以了解一下2017-07-07
React?Native?的動(dòng)態(tài)列表方案探索詳解
這篇文章主要為大家介紹了React?Native?的動(dòng)態(tài)列表方案探索示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09