調用所有子組件的函數

Question

我有3個組件。他們的父母佈局，一個選擇框和一個面板，這是從一些數據生成的x次。

<Layout> 
<Dropdown> 
<Panel> 
<Panel> 
<Panel> 

我試圖讓它如此，當選擇值改變時，每個面板的內容改變。通過在新的選擇值和存儲在面板組件中的數據之間進行一些數學操作來進行更改。每個面板都有不同的數據。

Layout.js

updateTrueCost(selected){ 
this.refs.panel.setTrueCost 
} 

render(){ 
    return (
     <div> 
      <div class="row"> 
       Show me the true cost in 
       <CurrencyDrop currencyChange = {(e) => this.updateTrueCost(e)} data = {this.state.data} /> 
      </div> 

      <div class="row"> 
      {this.state.data.map((item, index) => (
       <Panel ref="panel" key = {index} paneldata= {item} /> 
      ))}     
      </div> 
     </div> 
    ); 
} 

Panel.js

setTrueCost(selected){ 
//Do some math 
this.setState({truecost: mathresult}) 
} 

render(){ 
    return(
    <div> 
     {this.state.truecost} 
    </div> 
) 
} 

CurrencyDrop.js

onHandelChange(e){ 
    this.props.currencyChange(e); 
} 

render(){ 
    return(
    <Select 
    onChange={this.onHandelChange.bind(this)} 
    options={options} /> 
    ) 
} 

目前的結果是隻有最後一個面板更新時選擇的變化。我猜測我在裁判處理方面做了一些錯誤的事情，但是我不能找到正確的術語，因爲我找不到任何相關的問題。

Answer 1

而不是調用ref的方法使用React內置生命週期方法。

class Panel extends React.Component { 
    componentWillReceiveProps (newProps) { 
     // compare old and new data 
     // make some magic if data updates 
     if (this.props.panelData !== newProps.panelData) { 
      this.setState({trueCost: someMath()}); 
     } 
    } 

    render() { 
     return <div>{this.state.trueCost}</div> 
    } 
} 

然後只是改變輸入道具和所有的數據會自動更新。