同じクラスの別のメソッドから別のクラスに渡されるメソッドへのアクセス

Question

私のSearch.tsxクラスには以下のメソッドがあります。

renderSuggestion(suggestion) { 
    <div className="buttons"> 
     <button className="button">View Location</button> 
     <button className="button whitebutton" onClick={this.handleThatEvent.bind(this)}>Add to price checker</button> 
    </div> 

} 

render() { 
     <Autosuggest 
      suggestions={suggestions} 
      onSuggestionsFetchRequested={this.onSuggestionsFetchRequested} 
      onSuggestionsClearRequested={this.onSuggestionsClearRequested} 
      getSuggestionValue={this.getSuggestionValue} 
      renderSuggestion={this.renderSuggestion} 
      inputProps={inputProps}/> 
} 

public handleThatEvent(e){ 
      //MOUSE CLICK LOGIC HERE 
}; 

ここで、renderSuggestionメソッドはAutoSuggestコンポーネントに渡されます。 renderSuggestionのボタンをクリックすると、handleThatEventメソッドを呼び出す必要があります。しかし、どのように私はrenderSuggestionメソッドからこのメソッドにアクセスできますか？私は "this"にコンストラクタの "that"を代入しようとしましたが、that.handleThatEventメソッドを呼び出そうとしました。しかし、 "それ"は未定義を返します。 renderSuggestionメソッドのbutton clickイベントでこのhandleThatEventをどのように呼び出すことができますか？どんな助けでも大歓迎です。

Answer 1

はちょうどあなたがrenderSuggestion方法バインドする必要があり、あなたがhandleThatEventメソッドをバインド好き：

<Autosuggest 
    suggestions={suggestions} 
    onSuggestionsFetchRequested={this.onSuggestionsFetchRequested} 
    onSuggestionsClearRequested={this.onSuggestionsClearRequested} 
    getSuggestionValue={this.getSuggestionValue} 
    renderSuggestion={this.renderSuggestion.bind(this)} 
    inputProps={inputProps}/> 

をしかし、私はあなたが別のコンポーネントからのhtmlを挿入しないようにアドバイスしたい、反応するの哲学は、各コンポーネントのことです独自の状態を管理します。
おそらくAutosuggestコンポーネントでrenderSuggestion方法を持っているだけでそれをハンドラ関数を渡す必要があります。

<Autosuggest 
    suggestions={suggestions} 
    onSuggestionsFetchRequested={this.onSuggestionsFetchRequested} 
    onSuggestionsClearRequested={this.onSuggestionsClearRequested} 
    getSuggestionValue={this.getSuggestionValue} 
    onSuggestionButtonClick={this.handleThatEvent.bind(this)} 
    inputProps={inputProps}/>