如何將react-autosuggest中的值傳遞給父組件？

Question

在我app.js，我有這個

render() { 
    return (
    <div id="App"> 
     <SearchBar /> 
    </div> 
); 
} 

和搜索欄裏面，我反應過來導入，自動提示，並有這一點 -

render() { 
    const { value, suggestions } = this.state; 
    const inputProps = { 
    placeholder: "Search", 
    value, 
    onChange: this.onChange 
    }; 

    return (
    <Autosuggest 
     style={style} 
     suggestions={suggestions} 
     onSuggestionsFetchRequested={this.onSuggestionsFetchRequested} 
     onSuggestionsClearRequested={this.onSuggestionsClearRequested} 
     getSuggestionValue={getSuggestionValue} 
     renderSuggestion={renderSuggestion} 
     inputProps={inputProps} 
     onSubmit={this.doSomething} 
     /> 
); 
} 

所有這些功能都是react-標準的樣板功能自動建議使用。我如何訪問SearchBar內部搜索到的內容，在它的父級app.js中？

Answer 1

您可以使用道具將數據從Autosuggest事件中提升到父組件。在App中創建一個方法，並將其作爲道具傳遞給SearchBar組件。然後，用Autosuggest事件調用它。

應用

class App extends React.Component { 
    onSubmit(e) { 
    // `e` is the data that was passed through from the `Autosuggest` event. 
    console.log(e); 
    } 

    render() { 
    return (
     <div id="App"> 
     <SearchBar onSubmit={this.onSubmit} /> 
     </div> 
    ); 
    } 
} 

搜索欄

<Autosuggest onClick={this.props.onSubmit} />