javascript - 从同一类中的另一个方法访问一个方法，该方法作为 props 传递给另一个类

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

就像绑定(bind) handleThatEvent 方法一样，您应该绑定(bind) renderSuggestion 方法:

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

但我建议你不要将 html 从一个组件插入到另一个组件，react 的哲学是每个组件将管理自己的状态。
您可能应该在 Autosuggest 组件中使用 renderSuggestion 方法，然后将处理函数传递给它:

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