반응 막대에서 검색 막대 버튼과 결과 구성 요소를 구현하는 방법

Question

다른 답변도 이미 보았지만 초보자부터 구현하려고 시도했지만 혼란스러워서 아무 것도 작동하지 않았습니다. 문제는 다음과 같습니다.

제출 버튼이 있어야하는 검색 바 (Searchbar 구성 요소)가 있습니다. 버튼을 클릭하면 검색 결과가 뷰어 구성 요소에 표시됩니다. 뷰어에서 Searchbar의 이벤트를 연결하는 방법을 모르겠습니다. 어떤 구성 요소가 다른 구성 요소에서 변경된 것을 어떻게 알 수 있습니까? 나는 두 형제가 통신 원하는 결과 구성 요소에 대한 지금

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; 

:

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

는 AS App.js 렌더링됩니다 여기에 기본적인 생각은 이렇게 될 것입니다. 검색 및 뷰어를 렌더링하는 상위 구성 요소가 있습니다. 이 구성 요소에는 검색 할 때 사용자의 입력을 추적하는 상태와 검색 결과를 보유 할 배열 또는 개체가 있습니다. 다음은 아이디어를 제공하는 의사 코드입니다.

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

이것은 아이디어를 제공하기위한 몇 가지 예제 코드입니다. 기본적으로 앱 구성 요소는 모든 상태와 기능을 처리하지만 다른 구성 요소는 비주얼만을 처리합니다.