Передача данных и событий между братьями и сестрами в React - PullRequest
Новая
       27

Передача данных и событий между братьями и сестрами в React

0 голосов
/ 12 июня 2018

Я пытаюсь передать данные из компонента поиска в компонент результата.Идея состоит в том, что входные данные из поля поиска в компоненте поиска будут отправлены компоненту результата и использованы в качестве параметра для вызова 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>
    );
  }
}
...