React事件系統(tǒng)和表單操作的示例分析

這篇文章主要介紹React事件系統(tǒng)和表單操作的示例分析，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

　　1.react的事件系統(tǒng)

　　react事件系統(tǒng)符合W3school標(biāo)準(zhǔn)，不存在任何IE兼容性問(wèn)題，并且與原生的瀏覽器事件一樣有同樣的API接口。同樣支持事件的冒泡機(jī)制，我們可以使用stopPropagation（）和preventDefault（）來(lái)終止它。

　　所有的事件都自動(dòng)綁定到最外層。如果需要訪問(wèn)原生事件對(duì)象，可以使用nativeEvent屬性。

　　2.合成事件

　?。?）事件委派

　　react把所有事件綁定到結(jié)構(gòu)的最外層，使用一個(gè)同意的事件監(jiān)聽器，這個(gè)事件監(jiān)聽器上維持了一個(gè)映射來(lái)保存所有組件內(nèi)部的事件監(jiān)聽和處理函數(shù)。

　　（2）自動(dòng)綁定

　　在react組件中，每個(gè)方法的上下文都會(huì)指向該組件的實(shí)例，即自動(dòng)綁定this為當(dāng)前組件。但是在使用ES6 classes或者純函數(shù)時(shí)這種自動(dòng)綁定就不復(fù)存在，需要手動(dòng)實(shí)現(xiàn)this的綁定。

　　（3）綁定方法

　　3-1：bind方法：可以幫助我們綁定事件處理完器內(nèi)的this，并且可以向事件處理器中傳入?yún)?shù)，比如：

　　3-2構(gòu)造器內(nèi)聲明（推薦）：在組件的構(gòu)造器內(nèi)完成對(duì)事件的綁定。

　　3-3箭頭函數(shù)：它自動(dòng)綁定了定義此函數(shù)作用域的this。

　　3.原生事件

　　componenDidMount會(huì)在組件已經(jīng)完成安裝并且在瀏覽器存在真實(shí)的 DOM后調(diào)用，此時(shí)我們就可以完成對(duì)原生事件的綁定。

　　注意：在react中使用DOM原生事件時(shí)，一定要在組件卸載時(shí)手動(dòng)移除，否則可能出現(xiàn)內(nèi)存泄漏問(wèn)題。

　　4.混合事件

　　我們無(wú)法在組件中將事件綁定到組件范圍之外的區(qū)域，只能使用原生事件來(lái)實(shí)現(xiàn)。

　　但是，盡量在React中混用合成事件和原生DOM事件：用reactEvent.nativeEvent.stopPropagatoin（）來(lái)阻止事件冒泡是不行的。組織React事件冒泡的行為只適用于React合成系統(tǒng)中，且沒辦法阻止原生事件冒泡。反之，在原生事件中阻止事件冒泡，卻可以阻止React事件的傳播。

以上是“React事件系統(tǒng)和表單操作的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！