構建 react 中可重用靈活的表單元件

2021-09-30 18:46:31 字數 3211 閱讀 6760

優化form

非受控即 元件內部不存在狀態，元件的狀態由父元件傳入;一般該型別元件用來做資料展示,但不可控制

非受控元件通常我們會寫成純函式想這樣:

import react from


'react'


export


default


function


uncontrollform()


/>


<


/div>


<


/div>


)}
該型別元件,接受父元件傳入的資料後,若自身資料更新將資料傳遞給父元件並更新自身狀態

我們一般會這樣做:

import react from


'react'


export


default


class


arrowfncform


extends


react.purecomponent


handlechange


(type,value)


render()


=this


.props;


return


("profile-form"


>


"field"


>


name<


/label>


"text"


value=


onchange=


/>


<


/div>


"field"


>


e-mail<


/label>


"text"


value=


onchange=


/>


<


/div>


<


/div>)}


}
問題:當多個受控元件時,我們會給處理函式加入type欄位來區分,在onchange中要給函式傳遞引數我們只能用箭頭函式包一層,即向上面那樣…

但這樣做也會導致 render 每次建立/替換箭頭函式,接受這些函式的 內容也將重新呈現。

我們會這樣修正:

import react from


'react'


export


default


class


arrowfncform


extends


react.purecomponent


handlenamechange


(e)handleemailchange


(e)render()


=this


.props;


return


("profile-form"


>


"field"


>


name<


/label>


"text"


value=


onchange=


/>


<


/div>


"field"


>


e-mail<


/label>


"text"


value=


onchange=


/>


<


/div>


<


/div>)}


}
原文傳送

我們可以通過react context來將公用的事件進行傳輸,然後將輸入元件包裹在hoc(高階元件)中以讀取上下文。

示例如下:

// entitydata.jsx


const entitydatacontext = react.


createcontext()


;export


function


withentitydata


(component)


source=


path=


value=


/>


onchange=


/>);


}}<


/entitydatacontext.consumer>);


};}export


default


class


entitydata


extends


react.purecomponent


}>


<


/entitydatacontext.provider>);


}}
//  stringinput.jsx


import react from


'react'


import


from


'../entitydata'


class


stringinput


extends


react.purecomponent


handlechange


(e)render()


=this


.props;


return


(type=


'text'


value=


onchange=


>


<


/input>)}


}export


default


withentitydata


(stringinput)
現在我們可以這樣使用:



class


profileform


extends


react.purecomponent


=this


.props;


return


("profile-form"


>


onchange=


>


"name" path=


"name"


/>


"e-mail" path=


"email"


/>


"phone" path=


"phone"


/>


<


/entitydata>


<


/div>);


}}

ELF 靈活可擴充套件的 HTML5 構建工具

通常當我們開始乙個新的 html5 場景營銷活動專案時，需要建立專案目錄，初始化基本的專案檔案，然後再新增構建 grunt gulp webpack 相關的檔案 一次兩次三次 像小精靈採木一樣 目前有不少工具可以幫我們解決一部分這種重複性的工作，但不能完全的解決，於是，就有了小精靈 elf 官網 e...

ELF 靈活可擴充套件的 HTML5 構建工具

elf，意為小精靈，來自war3中暗夜精靈族的農民。通常當我們開始乙個新的 html5 場景營銷活動專案時，需要建立專案目錄，初始化基本的專案檔案，然後再新增構建 grunt gulp webpack 相關的檔案 一次兩次三次 像小精靈採木一樣 目前有不少工具可以幫我們解決一部分這種重複性的工作，但...

ELF 靈活可擴充套件的 HTML5 構建工具

elf，意為小精靈，來自war3中暗夜精靈族的農民。通常當我們開始乙個新的 html5 場景營銷活動專案時，需要建立專案目錄，初始化基本的專案檔案，然後再新增構建 grunt gulp webpack 相關的檔案 一次兩次三次 像小精靈採木一樣 目前有不少工具可以幫我們解決一部分這種重複性的工作，但...