web-dev-qa-db-fra.com

Comment implémenter le bouton de la barre de recherche et les composants du résultat dans reag

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

J'ai une barre de recherche (composant Searchbar) qui est supposé avoir un bouton d'envoi. Lorsque le bouton est cliqué, les résultats de la recherche sont supposés apparaître dans le composant Viewer. Je ne sais pas comment connecter un événement à partir de Searchbar dans Viewer. Comment dire à un composant que quelque chose a changé dans l'autre? Je veux que deux frères et sœurs communiquent ça

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 le composant 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 en tant que

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

L'idée de base ici serait la suivante. Vous avez votre composant Parent qui rend votre recherche et votre visualiseur. Dans ce composant, vous aurez un état qui gardera trace de l'entrée de l'utilisateur lors de la recherche, ainsi qu'un tableau ou un objet qui contiendra les résultats de la recherche. Voici un 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>
        )
    }
}

Ceci est juste un exemple de code pour vous donner une idée . Fondamentalement, le composant d'application gérera tous les états et fonctionnalités, tandis que les autres ne traiteront que des éléments visuels. 

2
Chaim Friedman