react父元素獲取子元素表單數據


一般來說有兩種實現方式

一種是父子組件實時在進行數據傳遞和獲取(即實時獲取)
一種是在父組件點擊時獲取子組件數據,期間父組件並不實時收集子組件變化的數據(即點擊時獲取)

簡述:

注意:
    1、子組件調用父組件的方法:將父組件的方法以函數屬性的形式傳遞給子組件,子組件就可以調用
    2、父組件調用子組件的方法:在父組件通過ref得到子組件標簽對象,知識點:標簽對象就是組件對象

 

 

(1)實時獲取

本質:父組件傳遞函數事件,然后在子組件里綁定到對應數據上

1、父組件傳遞事件

  

2、子組件繼承並調用事件

  

3、父組件設置監聽,接受子組件變化

  

  此時便可以在父組件接受子組件表單數據

 

 

(2)點擊時獲取

  結合ref實現,主要分為三部曲,如下所示

父組件:
    1、創建:創建用來保存ref標識的標簽對象容器
    2、傳遞:調用處傳入ref
    3、調用獲取

子組件:
    1、封裝獲取方法,以供父組件獲取子組件數據

  具體如下:

  1、父組件創建

  

 

  2、父組件:傳入ref

  

 

  3、父組件獲取

  

this.platformList.current.getPlatformList()為獲取關鍵

  4、子組件封裝獲取數據方法,以供父組件調用

  

本質:標簽對象就是組件對象

  

 

 

 

 

 

.


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM