如何将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} />