鍍金池/ 問答/HTML/ React求問。父組件中有一組子組件, 如何通過點(diǎn)擊父組件的按鈕，將子組件中操作

React求問。父組件中有一組子組件, 如何通過點(diǎn)擊父組件的按鈕，將子組件中操作得到的值傳回父組件。

clipboard.png

最近實(shí)習(xí)上遇到了一個(gè)問題，有點(diǎn)煩惱，一時(shí)實(shí)在想不出來。React新人，想來論壇問問大神們的想法，
是這樣的，我現(xiàn)在有一個(gè)product table，table里面有一個(gè)接口可以得到數(shù)據(jù)，數(shù)據(jù)是一組些商品的id和相關(guān)信息，這個(gè)數(shù)據(jù)一直在變所以這些商品的個(gè)數(shù)也是變化的。
我就把商品數(shù)據(jù) 傳進(jìn)子組件product cell里，product.map(product => <ProductCell product={product} />這樣來展現(xiàn)這個(gè)product table。
現(xiàn)在我需要在商品框product cell里有一個(gè)input小框，用來填數(shù)字，然后product table里有一個(gè)按鈕，我一點(diǎn)擊這個(gè)按鈕，我就希望在table里面能得到這些商品所輸入的數(shù)字和其對應(yīng)的id，有了這樣的一組數(shù)組ARRAY<order：Int, id: string>我就可以實(shí)現(xiàn)在table里面進(jìn)行排序，然后把排完序的array用另一個(gè)api去save排序的信息。

我的問題是：如何在table里面得到product cell里數(shù)字的信息呢？我知道通過props里設(shè)值call back讓一個(gè)子組件向父組件里傳信息，但是現(xiàn)在有多個(gè)子組件，總個(gè)數(shù)還不確定，而且得到這些信息的觸發(fā)條件在于是否在table里點(diǎn)擊按鈕。。。。。就有點(diǎn)搞不明白了

如果有人帥心善的大神愿意指教，十分感謝~

回答
編輯回答
愿如初

技術(shù)層面，樓上兩位已經(jīng)回答了，我認(rèn)為 思路需要變一下，子組件的值改變后，就應(yīng)當(dāng)順手傳給父組件了，父組件再點(diǎn)按鈕只需處理現(xiàn)有的數(shù)據(jù)即可

2018年5月21日 21:46
編輯回答
墨沫

樓上回答的正解，一句話：通過props傳遞函數(shù)，子組件調(diào)用該函數(shù)來達(dá)到傳值目的。

比如：

 <div>
    <Child callback={this.callback}/>
 </div>

 callback=(params)=>{
   //在這里獲取的params就是子組件調(diào)用callback傳過來的值
 }
2017年2月13日 05:19
編輯回答
北城荒

知道通過props設(shè)置callback取得數(shù)據(jù)那就把所有數(shù)據(jù)都保存在父組件的state中，然后子組件只要改變，就動(dòng)態(tài)的修改父組件里的state值，最后父組件提交的時(shí)候只需要拿自己state中的值就好了。
大體思路就是：子組件的所有數(shù)據(jù)來源都是父組件的state，包括input，這樣在input修改的時(shí)候，觸發(fā)onChange方法，去改變父組件中的state，最終提交的時(shí)候只需要父組件讀取自己的state即可

2017年1月27日 16:35