Question

我正在尝试将数据从搜索组件传递到结果组件。我们的想法是，搜索组件中搜索字段的输入将被发送到结果组件，并在单击搜索按钮时用作API调用的参数。

我基于这篇文章的数据流结构：https://codeburst.io/no-redux-strategy-for-siblings-communication-3db543538959，但我是React的新手，这有点令人困惑。

我尝试直接从类似vinmonopolet.searchProducts({this.props.data}的道具中获取参数，但我遇到了语法错误。

我也不清楚如何将onClick事件从一个组件引导到另一个组件。

父

class App extends Component {
  constructor(){
    super();
    this.state = { data: '' }
  }

  fromSearch(param){
    this.setState({
      data: param
    });
  }

  render() {
    return (
      <div className="App">
        <Navbar />
        <Searchbar callback={this.fromSearch.bind(this)} />
        <ResultTable data={this.state.data}/>
      </div>
    );
  }
}

Child1

class Searchbar extends React.Component{
  getContent(event){
    this.props.callback(event.target.value);
  }
  Searchbar.protoTypes = {
    callback: ProtoTypes.func
  }
  render(){
    return(
      <div className="search-container">
        <div className="search-field">
          <input type="text" placeholder="Hva leter du etter?"
                 onChange={this.getContent.bind(this)}/>
               <button type="button" onClick={???}>Search</button>
        </div>
...

CHILD2

class ResultTable extends React.Component{
  constructor(){
    super();
    this.state = {products: []}
  }
searchAllProducts(){
    const vinmonopolet = require('vinmonopolet')
    vinmonopolet.searchProducts({this.props.data}, {sort: ['price', 'asc']}).then(response => {
      const data = response.products;
      const listItems = data.map((d) =>
      <tr key={d.name}>
        <td>{d.productType}</td>
        <td>{d.name}</td>
        <td>{d.price}kr</td>
      </tr>
      );
      this.setState({products: listItems});
    })
  }
render(){
    if(!this.state.products) return <p>Henter data...</p>;
    return(
      <div className="result-container">
        <div className="result-table-header">
          <table>
            <th>Type</th>
            <th>Varenavn</th>
            <th>Pris</th>
          </table>
        </div>
        <div className="result-table-body">
          <table className="result-table">
          {this.state.products}
          </table>
        </div>
      </div>
    );
  }
}

在React中传递兄弟姐妹之间的数据和事件

0 个答案: