基于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封裝一個通用可編輯組件的詳細(xì)內(nèi)容，更多關(guān)于react封裝編輯組件的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要介紹了React中遍歷數(shù)組生成標(biāo)簽問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
在使用React搭建用戶界面時,組件可以分為兩類：受控組件和費受控組件這兩種組件在數(shù)據(jù)處理方式上有著顯著的差異,理解它們的區(qū)別對于構(gòu)建高效和可控的React應(yīng)用至關(guān)重要,本文將深入探討這兩種組件的定義、特點以及使用場景,并通過示例代碼幫助你更加清晰地理解它們2025-01-01
react Input組件Compositionstart和Compositionend事件
這篇文章主要為大家介紹了Compositionstart和Compositionend事件之于react組件庫Input組件的坑解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-11-11
React中g(shù)etDefaultProps的使用小結(jié)
React中的getDefaultProps功能允許開發(fā)者為類組件定義默認(rèn)屬性,提高組件的靈活性和容錯性,本文介紹了getDefaultProps的作用、語法以及最佳實踐,并探討了其他替代方案,如函數(shù)組件中的默認(rèn)參數(shù)、高階組件和ContextAPI等,理解這些概念有助于提升代碼的可維護性和用戶體驗2024-09-09
小編需要封裝一個通過Popover彈出框里可以自定義渲染內(nèi)容的組件，渲染內(nèi)容暫時有: 單選框, 復(fù)選框，接下來通過本文給大家分享React封裝CustomSelect組件思路,需要的朋友可以參考下2022-07-07
react?express實現(xiàn)webssh?demo解析
這篇文章主要為大家介紹了詳解react?express實現(xiàn)webssh?demo解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-04-04
解決React報錯Unexpected default export of an
這篇文章主要為大家介紹了React報錯Unexpected default export of anonymous function解決方法，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12
React服務(wù)端渲染和同構(gòu)的實現(xiàn)
本文主要介紹了React服務(wù)端渲染和同構(gòu)的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04
React-Native實現(xiàn)ListView組件之上拉刷新實例（iOS和Android通用）
本篇文章主要介紹了React-Native實現(xiàn)ListView組件之上拉刷新實例（iOS和Android通用），具有一定的參考價值，有興趣的可以了解一下2017-07-07
這篇文章主要為大家介紹了React?Native?的動態(tài)列表方案探索示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09