Comment mettre en œuvre bouton de la barre de recherche et le résultat de composants à réagir

J'ai déjà vu d'autres réponses qui se ressemblent, mais depuis que je suis un débutant, j'ai essayé de les mettre en œuvre et je me suis tellement confus que rien n'a fonctionné pour moi. Voici le problème:

J'ai une barre de recherche (barre de recherche de la composante) qui est censé avoir un bouton "soumettre". Lorsque le bouton est cliqué, les résultats de la recherche sont censées apparaître dans la Visionneuse de composant. Je ne sais pas comment le connecter événement de barre de recherche dans la Visionneuse. Comment dire à un composant que quelque chose a changé dans l'autre? J'en veux deux frères et sœurs de communiquer que

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;

maintenant pour la composante de résultat:

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;

Ils sont tous deux contenus dans le dossier src et rendus dans App.js comme

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

OriginalL'auteur HomeMade | 2017-03-06

L'idée de base ici serait comme ça. Vous avez votre composant Parent qui rend votre recherche et de votre spectateur. Dans cette partie, vous aurez l'etat qui permettra de garder une trace de l'entrée de l'utilisateur dans la recherche, et d'un tableau ou d'un objet qui contiendra les résultats de la recherche. Voici le pseudo-code pour vous donner une idée.

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

C'est juste un exemple de code pour vous donner une idée.
Fondamentalement, l'application de la composante se chargera de tout état et de la fonctionnalité, tandis que les autres auront à traiter avec des effets visuels.

OriginalL'auteur Chaim Friedman

Vous devez vous connecter pour publier un commentaire.