レスキューバーで検索バーボタンと結果コンポーネントを実装する方法

Question

私はすでに同様の回答を見たことがありますが、初心者であるため、実装しようとしました。ここに問題があります：

私は、送信ボタンがあるはずの検索バー（Searchbarコンポーネント）を持っています。ボタンをクリックすると、検索結果がViewerコンポーネントに表示されます。ビューアのSearchbarからイベントをどのように接続するのか分かりません。他のコンポーネントで何かが変更されたことをあるコンポーネントに伝えるには？

var Result = React.createClass({ 

render() { 
    return (
     <div> 
      <hr /> 
      <h2>Result here</h2> 
      <h2>{this.props.result.drug_name}</h2>   
      <span>{this.props.result.description}</span> 
      <img src={this.props.result.image} /> 
     </div> 
    ) 
} 
export default Result; 

彼らは両方のsrcフォルダに含まれていると

var App = React.createClass({ 
render: function() { 
    return (
     <div> 
     <Searchbar /> 
     <Viewer /> 
     </div> 
    ) 
    } 
}); 

Answer 1

としてApp.jsでレンダリング：私は2人の兄弟が

import React from 'react'; 

var Searchbar = React.createClass({ 
    getInitialState: function() { 
    return {}; 
    }, 

handleSubmit: function (e) { 
e.preventDefault(); 
// what to do here 
}, 
render: function() { 
return (
    <form onSubmit={this.handleSubmit}> 
    <h3>I'm looking for:</h3> 
    <input ref="srch" type="search" id="search" placeholder="Search..." /> 
    <button>Go</button> 
    <hr /> 
    </ 
}); 

export default Searchbar; 

は今結果コンポーネントのことを伝えたいですここの基本的なアイデアはこういうことでしょう。あなたはあなたの検索とあなたのビューアをレンダリングするParentコンポーネントを持っています。このコンポーネントでは、ユーザーの入力を検索する際の状態を把握する状態と、検索結果を保持する配列またはオブジェクトがあります。あなたにアイディアを与える疑似コードがあります。

class App extends React.Component { 
    constructor() { 
     super(); 
     this.state = { 
      searchText: '', 
      searchResults: [] 
     } 
    } 

    onChange(e) { 
     this.setState({searchText: e.target.value}); 
    } 

    getResults() { 
     calltodb(searchText).then(e => { 
      this.setState({searchResults: e.value}) 
     }); 
    } 

    render() { 
     return (
      <div> 
       <SearchBar /> 
       <SearchResults /> 
      </div> 
     ) 
    } 
} 

これはあなたにアイデアを与えるための単なるコード例です。 基本的に、appコンポーネントはすべての状態と機能を処理しますが、他のコンポーネントはビジュアルのみを処理します。