React：子コンポーネント内で関数を呼び出す

Question

this.refsを介して子コンポーネント内の関数を呼び出そうとしていますが、この関数が存在しないというエラーが発生し続けます。

Uncaught TypeError: this.refs.todayKpi.loadTodaysKpi is not a function 

親コンポーネント：

class KpisHeader extends React.Component { 

    constructor() { 
    super(); 
    this.onUpdate = this.onUpdate.bind(this); 
    } 
    render(){ 
     return <div> 
      <DateRange ref="dateRange" onUpdate={this.onUpdate}/> 
      <TodayKpi ref="todayKpi" {...this.state}/> 
      </div>; 
    } 

    onUpdate(val){ 

     this.setState({ 
      startDate: val.startDate, 
      endDate: val.endDate 
     }, function(){ 
     this.refs.todayKpi.loadTodaysKpi(); 
     }); 
    } 
} 

私は、関数にonUpdateを通じてのDateRangeコンポーネントからいくつかのデータを取得したい、と私は、サーバーからデータを取得TodayKpi内部機能をトリガします。今のところそれは単なるconsole.log（ "AAA"）;です。

子コンポーネント：

class TodayKpi extends React.Component { 
    constructor() { 
     super(); 
     this.loadTodaysKpi = this.loadTodaysKpi.bind(this); 
    } 

    render(){ 
     console.log(this.props.startDate + " "+ this.props.endDate); 
     return <div className="today-kpi"> 


      </div>; 
    } 
    loadTodaysKpi(){ 
     console.log("AAAA"); 
    } 
} 

どのように私はこれを実装する必要がありますか？あなたが子供の内部で呼び出される関数/メソッドを使用する場合は

Answer 1

することは、あなたが開始するために、親から子にそれを渡す必要があります。あなたが変更する必要がある他のものはonUpdateからonChangeです。そのフィールドへのすべての変更を追跡したいと仮定します。もう1つの方法は、それがonSubmitのときにチェックすることですが、フィールドが更新されるたびにそのようにしたいと思うように聞こえます。

Answer 2

私がまだ理解していない理由から、Reactは親から子メソッドを呼び出すことを躊躇します。しかし、彼らは逃げて、ちょうどそれを許す「エスケープハッチ」を私たちに与えます。あなたは、 'Refs'がそのエスケープハッチの一部であったと思うのは間違いありません。私のように、この情報を検索する数十の記事を読んだら、あなたはそれらを理解する準備ができているでしょう。

あなたの場合、あなたのKpisHeaderクラスでこれを試してみてください。

変更このライン

<TodayKpi ref="todayKpi" {...this.state}/> 

このような何かrefのコールバック関数を使用するには：

<TodayKpi ref={(todayKpiComponent) => this.todayKpiComponent = todayKpiComponent} {...this.state}/> 

または、事前ES6は、この：

<TodayKpi 
    ref= 
    { 
     function (todayKpiComponent) 
     { 
      this.todayKpiComponent = todayKpiComponent  
     } 
    } 
    {...this.state} 
/> 

次に、あなたがなりますKpisHeaderクラスのtodayKpiコンポーネントメソッドに次のようにアクセスできます：

this.todayKpiComponent.someMethod(); 

私にとって、refコールバック関数の中では、 'this'は親コンポーネントではなくウィンドウでした。だから、レンダリングメソッドの上に

var self = this; 

を追加し、refコールバック関数内で 'self'を使用する必要がありました。

は、私の場合は、動的に生成された子コンポーネントの数が不明だったので、私は配列にそれぞれ1を入れました。私はcomponentWillUpdateで配列をクリアしました。それはすべて機能しているようですが、特にReactの子供の方法を呼び出すための嫌悪感を感じる不安感があります。