Question

我已经看到了其他相似的答案，但由于我是初学者，我尝试实施它们而且我很困惑，没有什么对我有用。这是问题所在：

我有一个搜索栏（Searchbar组件），它应该有一个提交按钮。单击该按钮时，搜索结果应显示在Viewer组件中。我不知道如何从Viewer中的Searchbar连接事件。如何告诉一个组件另一个组件发生了什么变化？我想要两个兄弟姐妹来沟通

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

Answer 1

这里的基本想法是这样的。您有父组件，可以呈现您的搜索和查看器。在此组件中，您将拥有在搜索时跟踪用户输入的状态，以及将保存搜索结果的数组或对象。这里有一些伪代码可以给你一个想法。

@celery.task

这只是一些示例代码，可以给您一个想法。基本上，app组件将处理所有状态和功能，而其他组件仅处理视觉效果。

如何实现搜索栏按钮和结果组件的反应

1 个答案: