javascript - How to implement search bar button and result components in react - Stack Overflow

admin管理员组

文章数量:1277380

I have already seen other answers which are alike, but since I am a beginner, I tried implementing them and I got so confused that nothing worked for me. Here is the problem:

I have a search bar (Searchbar ponent) which is supposed to have a submit button. When the button is clicked, the search results are supposed to appear in Viewer ponent. I don't know how to connect event from Searchbar in Viewer. How to tell one ponent that something changed in the other one? I want two siblings to municate that

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;

now for the result ponent:

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;

They are both contained in the src folder and rendered in App.js as

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

I have already seen other answers which are alike, but since I am a beginner, I tried implementing them and I got so confused that nothing worked for me. Here is the problem:

I have a search bar (Searchbar ponent) which is supposed to have a submit button. When the button is clicked, the search results are supposed to appear in Viewer ponent. I don't know how to connect event from Searchbar in Viewer. How to tell one ponent that something changed in the other one? I want two siblings to municate that

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;

now for the result ponent:

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;

They are both contained in the src folder and rendered in App.js as

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

• javascript
• reactjs
• binding
• siblings

Share Improve this question Follow edited Mar 6, 2017 at 23:20 HomeMade asked Mar 6, 2017 at 19:50 HomeMadeHomeMade 57044 gold badges1010 silver badges2121 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

The basic idea here would be like this. You have your Parent ponent which renders your search and your viewer. In this ponent you will have state that will keep track of the user's input as they search, and an array or object that will hold the results of the search. Here is some pseudo code to give you an idea.

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

This is just some example code to give you an idea. Basically, the app ponent will handle all state and functionality, while the others will deal with visuals only.

本文标签： javascriptHow to implement search bar button and result components in reactStack Overflow