web-dev-qa-db-ja.com

反応で検索バーボタンと結果コンポーネントを実装する方法

似たような他の答えはすでに見ましたが、私は初心者なので実装を試みましたが、混乱して何もうまくいきませんでした。ここに問題があります：

送信ボタンがあるはずの検索バー（Searchbarコンポーネント）があります。ボタンがクリックされると、検索結果はViewerコンポーネントに表示されるはずです。ビューアの検索バーからイベントを接続する方法がわかりません。他のコンポーネントで何かが変更されたことを1つのコンポーネントに伝える方法は？私は2人の兄弟にそれを伝えて欲しい

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フォルダーに含まれており、App.jsで次のようにレンダリングされます。

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

ここでの基本的な考え方はこのようになります。検索とビューアをレンダリングする親コンポーネントがあります。このコンポーネントでは、ユーザーが検索するときにユーザーの入力を追跡する状態と、検索結果を保持する配列またはオブジェクトが含まれます。ここにあなたにアイデアを与えるいくつかの擬似コードがあります。

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

これはあなたにアイデアを与えるためのほんの一例のコードです。基本的に、アプリコンポーネントはすべての状態と機能を処理しますが、その他はビジュアルのみを扱います。

2
Chaim Friedman