すべての子コンポーネントの関数を呼び出す

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 build-inライフサイクルメソッドを使用します。

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> 
    } 
} 

入力した小道具を変更すると、すべてのデータが自動的に更新されます。