react父元素獲取子元素表單資料

2022-04-03 06:07:36 字數 1315 閱讀 4988

一般來說有兩種實現方式

一種是父子元件實時在進行資料傳遞和獲取(即實時獲取)一種是在父元件點選時獲取子元件資料,期間父元件並不實時收集子元件變化的資料(即點選時獲取)

簡述:

注意:

1、子元件呼叫父元件的方法:將父元件的方法以函式屬性的形式傳遞給子元件,子元件就可以呼叫

2、父元件呼叫子元件的方法:在父元件通過ref得到子元件標籤物件,知識點:標籤物件就是元件物件

(1)實時獲取本質:父元件傳遞函式事件,然後在子元件裡繫結到對應資料上

1、父元件傳遞事件

2、子元件繼承並呼叫事件

3、父元件設定監聽,接受子元件變化

此時便可以在父元件接受子元件表單資料

(2)點選時獲取

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

父元件:

1、建立:建立用來儲存ref標識的標籤物件容器

2、傳遞:呼叫處傳入ref

3、呼叫獲取

子元件:

1、封裝獲取方法,以供父元件獲取子元件資料

具體如下:

1、父元件建立

2、父元件:傳入ref

3、父元件獲取

this.platformlist.current.getplatformlist()為獲取關鍵
4、子元件封裝獲取資料方法,以供父元件呼叫

本質:標籤物件就是元件物件

js獲取dom元素的子元素,父元素,兄弟元素小記

原生js var a document.getelementbyid dom del space a 清理空格 var b a.childnodes 獲取a的全部子節點 var c a.parentnode 獲取a的父節點 var d a.nextsibling 獲取a的下乙個兄弟節點 var e ...

子頁面獲取父頁面元素

剛寫完乙個專案,有用到iframe 因為是新手,所以研究了一下,啥也沒鼓搗出來。也就是會用了子頁面呼叫父頁面的方法。瀏覽器不支援iframe,請更換瀏覽器 這就是我的樣式,高度是用js控制的 然後再 z sy.html 頁面 切換頁面 window.parent.document.getelemen...

子元素蓋住父元素邊框

做tab選項卡頁的時候,當前活動的選項卡有邊框,同時下邊和面板之間無邊框 記得以前實現過,但再用的時候卻又不會了.現在實現如下.tab頁標題區域的html 乙個div下的若干span,每個span對應乙個選項卡.home profile 選項卡下面的線,是tabs框的下邊框 tabs border ...