從同一個類中的另一個方法訪問作為方法傳遞給另一個類的方法

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方法訪問此方法？ 我嘗試將構造函數中的“ that”分配給“ this”，並嘗試調用方法that.handleThatEvent。 但是“ that”返回未定義。 如何在renderSuggestion方法的按鈕單擊事件中調用此handleThatEvent？ 任何幫助將非常感激。

Answer 1

就像你綁定的handleThatEvent方法，你應該綁定renderSuggestion方法：

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