はどうすれば親コンポーネントに反応-オートサジェストの内部で値を渡すのですか？私app.jsで

Question

、私はこの

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

を持っており、検索バーの内側に、私はインポート反応し、オートサジェストと持っているこの - これらすべての機能がreact-標準定型機能がある

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

オートサジェストを使用しています。どのように私はそれは、親app.js年代の内側に検索バーの内側を探していたものにアクセスできますか？

Answer 1

あなたは親コンポーネントにAutosuggestイベントからのデータを高めるために小道具を使用することができます。 App内部メソッドを作成し、SearchBar成分プロップとしてそれを渡します。その後、Autosuggestイベントでそれを呼び出します。

のApp

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