Wie implementieren Suchleiste Knopf und Ergebnis Komponenten in reagieren

Question

Ich habe bereits andere Antworten gesehen, die gleich sind, aber da ich ein Anfänger bin, versuchte ich, sie zu implementieren und ich war so verwirrt, dass nichts für mich arbeitete. Hier ist das Problem:

Ich habe eine Suchleiste (Searchbar-Komponente), die einen Absenden-Button haben soll. Wenn auf die Schaltfläche geklickt wird, sollten die Suchergebnisse in der Viewer-Komponente angezeigt werden. Ich weiß nicht, wie man ein Ereignis von der Suchleiste im Viewer verbindet. Wie man einer Komponente sagt, dass sich etwas in der anderen geändert hat? Ich möchte zwei Geschwister, dass für die Ergebniskomponente

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; 

jetzt kommunizieren:

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; 

Sie sind beide im src Ordner enthalten und in App.js als

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

Answer 1

Das gerenderte Grundidee wäre hier so. Sie haben Ihre Elternkomponente, die Ihre Suche und Ihren Betrachter rendert. In dieser Komponente haben Sie einen Status, der die Eingabe des Benutzers bei der Suche verfolgt, und ein Array oder Objekt, das die Ergebnisse der Suche enthält. Hier ist ein Pseudo-Code, um Ihnen eine Idee zu geben.

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

Dies ist nur ein Beispielcode, um Ihnen eine Idee zu geben. Grundsätzlich wird die App-Komponente alle Status und Funktionen behandeln, während die anderen nur mit visuellen Elementen arbeiten.